[CSS3] 利用@media screen实现网页布局的自适应

[复制链接]
利用@media screen实现网页布局的自适应
优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

1280分辨率以上(大于1200px)
  1. @media screen and (min-width:1200px){
  2.     #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
  3. }
复制代码
1100分辨率(大于960px,小于1199px)
  1. @media screen and (min-width: 960px) and (max-width: 1199px) {
  2.     #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
  3. }
复制代码
880分辨率(大于768px,小于959px)
  1. @media screen and (min-width: 768px) and (max-width: 959px) {
  2.     #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}
  3. }
复制代码
注意,如果判断设备没起作用,可以用这个代码

  1. @media screen and (max-device-width:480px)
复制代码

表示当设备分辨率小于480


回复

使用道具 举报

Copyright   ©2015-2016  大糖网  ( 浙ICP备17038000号-1 )

大糖网是站长们一起交流成长的平台,这里可以找到海量、优质精品的源码模板等建站资源