你的位置:首页 > 网页设计

[网页设计]网页响应式媒体查询


  前言:第一次写博客,还请各位前辈批评,指点,丢石头给我,感谢前辈和同行的指点!  

  涉世尚浅,才开始工作第三天,就接到了一个PC端直播间项目,还要求响应式的啊!对于当时的我,近一年多没碰过前端代码了(小生我转行的 iOS混不下去了),这有什么办法。第一次做响应式,只记得学校学过一个百分比布局,其他没了,什么内容自适应、字体大小、代码冗余、后期维护这些都没考虑。反正是先做出来了再说,最后做出来,无颜面对江东父老了,后期自己一边修改一边骂,SB啊 当时..SB啊 当时.

  不废话了,说说我做完直播间的收获,分享下

1)媒体查询 @media 是个好东西,至少对像我一样刚入行的小前端做响应式是个不错的选择。

①我们来看看媒体查询 页面最大宽度的标准写法    

1 @media screen and (max-width: 960px){2      body{3        background: #000000;4        font-size:14px;5        ...6   }7 }

解读下代码意思:当页面宽度小于960px时,使用以下对应样式表.

备注:screen 意思是告知设备在打印页面时使用无衬线体屏幕上显示也用无衬线字体,现在你会去打印一张网页吗?不会吧!所以目前网站都不会考虑用户去打印网站页面,so...screen可以不用写,直接省去.

    

②这是媒体查询 页面最小宽度的标准写法   

1 @media screen and (min-width:960px){2     body{3        background:#000000;4        font-size:14px;5        ...6   }7 }

代码意思:当页面宽度大于960px时,使用以下对应样式表.

 

③当然我们也可以媒体查询一个页面区间宽度,   

1 @media screen and (min-width:960px) and (max-width:1200px){2    body{3        background:#000000;4        font-size:14px;5        ...6     }7 }

上面代码大概意思是:当页面宽度大于960px,小于1200px时([960px,1200px]),使用以下样式表.

  

④ 媒体查询的其他参数  

以上是我们在开发过程中常用到的三种媒体查询特性小于、大于、等于,除此之外她还有其他特性,下面是我查找总结媒体查询的其他参数和用法.

      width/height:浏览器可视宽度(也叫视口)/浏览器可见高度.

      device-width/device-height:设备屏幕宽度/设备屏幕高度.

       color:检测颜色的位数。(例如:min-color:32  就是检测设备是否拥有32位颜色 #000000

       color-index:检查设备索引颜色表中的颜色(颜色值不能小于0)。

      orientation:判断当前设备是横屏还是竖屏.

       aspect-ratio:检测浏览器可视宽度和高度的比例。(现在宽高比为16:9是最佳的,比如我做的直播窗口,要求宽高比就是16:9)

      device-aspect-ratio:检测设备的宽度和高度的比例。

       resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。

       grid:检测输出的设备是网格设备的还是位图设备。

       monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个很少用得到)

 

  2)媒体查询的"局限性"

   我要说的这个局限性,指的是它不能用在IE8以下,IE8以下就不说了,它目前应该被前端骂的是 身残志坚了,IE8以下了 既不支持HTML5,也不支持CSS3的媒体查询,这个怎么搞...IE8以下放弃算求,但是有些公司,用户又不多啊,非得要求你小前端要响应式IE8以下,还好可以在项目中导入Respond.js,这样使用CSS3的媒体查询就有作用了,对于这个Respond.js,小生没实打实的用过,在这里闲扯了下,分享一篇知乎上关于这个Respond.js用法的文章给大家:https://www.zhihu.com/question/21634225

  

  3)实现响应式网页,不止CSS3的媒体查询能做

    1. Bootstrap:

       对于这些框架,我感觉都怕用,因为它里面所有标签的样式都有,你引用就好了,是节省了开发时间。对于我来说,有点难把握,做完移动端网站我就有点后悔用了它,要说,不管什么,会写源生的才是最Nice的.

    

    2. JS监听视口宽度变化从而动态更换CSS样式表,达到最佳的响应式:

       这种方式,应该是很多攻城狮都喜欢用的,因为它精确,对于代码冗余,后期维护这些都比较友好,你要知道,攻城狮一般都很强调用户体验的.

    等等...