现在移动端设备的普及下,除了办公和游戏外使用电脑的次数越来越少,基本上都成为了低头一族。而这苦了一些网页前端的设计人员,为了能让网页适应PC端又同时适配移动端的前提下。自适应响应式网页就成为了当前的主流。

自适应网页在不同设备或不同分辨率下,显示的布局是不同的。为了不让页面变形,而更好来美化网页,我们可以利用@media screen实现网页布局的自适应。

@media screen虽然可以实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢?

@media screen 使用方法

下面的代码是我们从bootstrap遍历出来的关于控制自适应的代码

@media print
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(max-width:767px){}

说明:从上页的代码中,我们不难看出min-width来确认分别是768、992、1200的分辨率。当然以前也有些老的设备宽度是600、480的,那些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max-width: 767px)表示<=767就不会有冲突了。

@media screen 最小宽度

从上面的代码中,可以看出有几个临界点的分辨率,通过他们我们可以写出自己的自适应代码

@media (min-width:768px){ //>=768px的设备 }
@media (min-width:992px){ //>=992px的设备 }
@media (min-width:1200){ //>=1200px的设备 }

注意下它们顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,如下面的代码

注意:此代码为错误的写法

@media (min-width:1200px){ //>=1200px的设备 }
@media (min-width:992px){ //>=992px的设备 }
@media (min-width:768px){ //>=768px的设备 }

因为如果是1440,由于1440>768那么你的1200就会失效。

我们用min-width时,要注意他们的排列顺序,小的放上面大的在下面(从小到大)

@media screen 最大宽度

既然我们可以使用min-width,也可以使用max-width来进行分辨率的划分,max-width的排列顺是大的在上面,小的在下面(从大到小)

@media (max-width:1199px){ //<=1199px的设备 }
@media (max-width:991px){ //<=991px的设备 }
@media (max-width:767px){ //<=768px的设备 }

通过上面的举例,我们可以灵活的来运用这些代码,来达到网页可以自适应各和设备的目的

@media and (min-width:1200px){//>=1200px的设备} 
@media and (min-width: 960px) and (max-width:1199px) {//<=1199px and >=960px的设备:PC端;}
@media and (min-width: 768px) and (max-width:959px) {//<=959px and >=768px的设备:PC端;}
@media and (min-width: 640px) and (max-width:767px) {//<=767px and >=640px的设备:平板端或者手机横屏;}
@media and (min-width: 480px) and (max-width:639px) {//<=639px and >=480px的设备:手机横屏;}
@media and (min-width: 320px) and (max-width:479px) {//<=479px and >=320px的设备:手机竖屏;}
@media and (min-width: 240px) and (max-width:319px) {//<=479px and >=320px的设备:手机竖屏;}
@media and (max-width:239px){//<=239px的设备:手机竖屏}