css-响应式布局

大家都注意过吧，你在电脑上打开的一个页面在手机上很有可能会以另一种布局显示，初学前端的小伙伴一定都遇到这样的问题：改变屏幕的分辨率，或者在手机上打开页面，都将会使你的页面将变得面目全非。

如何解决这个问题呢，你当然不会为每一种设备都写一个独一无二的页面，哈哈，或许有人这样做过（我可没有说你呦~）。

在这里我为你们介绍一下用 媒介查询实现响应式布局。

meta

将屏幕按1:1的比例显示
在网页代码的头部，加入一行viewport标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

---

media

 @media only screen and (min-width: 600px) { <!--注意此处and 后面为空格  min-width：600px后面没有;分号-->
            div {background-color: green;}
        }
 @media only screen and (min-width: 768px) { <!--min-width页面最小可见区域宽度-->
            div {background-color: blue;}
        } 

该代码在页面最小可见区域宽度为600px 时div的背景颜色变为绿色，为768px 时div的背景颜色变为绿色 记住大的宽度写在下面，不然将会被覆盖（上述例子将medi的位置颠倒背景颜色将一直为绿色）。

//例1
<link media="(min-width:500px)" rel="stylesheet" type="text/css" href="one.css">
<link media="(max-width:500px)" rel="stylesheet" type="text/css" href="two.css">
<!--注意此处的min-width:500px 后面没有分号;-->

//例2
<link media="(max-width:500px) and (min-width:400px)" rel="stylesheet" type="text/css" href="two.css">
<!--注意and 前后都必须用空格分隔开-->

上面例子可以对于不同的端口引用不同的css样式
例1：在宽度大于500px的时候应用 one.css样式，小于500px的时候应用 two.css样式。
例2：在宽度大于400px且小于500px的时候应用 two.css样式。

---

em/rem

要使得网页根据屏幕调整布局，所以不能使用绝对宽度布局，也不能使用绝对宽度的元素。
可以使用百分比宽度代替
字体只能使用相对大小（em）或者高清方案（rem）rem不局限于字体大小，前面的宽度width也可以使用，代替百分比。

rem 只是相对于根元素html的font-size（就是参照你html的font-size），只需要设置根元素的font-size，其他元素使用rem单位设置成对应的比例就可以了。

html{font-size:60px;}  //！！！
@media only screen and (min-width: 600px){
            div{font-size:.25rem}
        }
@media only screen and (min-width:768px){
            div{font-size:.5rem}
        }

上面这个例子可以根据屏幕的变化，改变div字体的大小。

---

图片处理

对于文章里插入图片可以通过css 样式max-width来控制图片的最大宽度

.wrap img{
        max-width:100%;
        height:auto;
    }

上面的例子：class为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

---

这里我写了一个简单的响应式页面：
【响应式布局-代码】