css响应式局部

css响应式局部

一个页面不只有自适应布局，同时还需要响应式布局，响应式布局就是在不同的设备终端上显示的样式进行重新的布局，比如屏幕比较大的话一行出现5块元素布局， 小点就变成了4块

下面就按照5中情况对响应式做出详解

1、容器的响应式
对于设置固定宽度的容器，大于设置的固定宽度的话会出现大量的空白，对于小于设定宽度的情况下会出现横向的滚动轴

1. 解决上面的办法一：给容器设置 % 例如： .contaner{ width: 100% }
2. 解决办法二：媒体查询

@media (max-width: 900px) {
	.contaner{
         width: 900px
    }
}
@media (max-width: 1000px) {
	.contaner{
         width: 1000px
    }
}
@media (max-width: 1200px) {
	.contaner{
         width: 1100px
    }
}

2、布局的响应式

1. 使用flex布局

    <div class="content">
	    <div class="l1">你，会跳舞吗？ </div>
	    <div class="l1">长安城内至高无上的女帝陛下。</div>
	    <div class="l1">长安城内至高无上的女帝陛下。</div>
	</div>

	// 对应的css样式
	 .content{
          display: flex;
          flex-wrap: wrap;  // 自动换行
       }
       .l1{
           flex: 300px;   // 此处表示l1元素小于300px时，会自动换行
           padding: 20px;
       }

2. 使用grid布局

<div class="content">
   <div class="l1">你，会跳舞吗？ </div>
    <div class="l1">长安城内至高无上的女帝陛下。</div>
    <div class="l1">长安城内至高无上的女帝陛下。</div>
</div>

// 对应的css样式
.content{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));  // 子元素宽度小于500时自动折行
}

3. grid利用媒体查询布局

<div class="content">
    <div class="l1">你，会跳舞吗？ </div>
    <div class="l1">长安城内至高无上的女帝陛下。</div>
    <div class="l1">长安城内至高无上的女帝陛下。</div>
</div>

.content{
   display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1800px) {
    .content{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (max-width: 1500px) {
    .content{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 1000px) {
    .content{
        display: grid;
        grid-template-columns: 1fr;
    }
}

3、自适应图片
对于移动端设置标签的时候加上srcset加载不同的图片即可

<img src="图片的路径" srcset=" ./src/img1.jpg 1240w, ./src/img2.jpg 800w,  ./src/img3.jpg 400w " sizes="(max-width: 400px) 300px, (max-width: 900px) 600px, 1240px" >

4、自适应文字
font-size: 20rem font-size: 1vw