网站建设联系电话 010-52406013

全部新闻

新闻资讯

网站建设

网站制作

网站维护

常见问题

签约动态

建站技术

想学习超流行的响应式设计?来看看这篇教程

时间:2015-11-02 22:34:55 作者:北京网站建设公司 访问量:

       

网站制作

     

      网上关于响应式设计的教程好复杂,我写一个简版的。

      简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div。

      这里有2个关键点:

      一是如何在不修改Dom结构的前提下调整布局。

      二是如何判断屏幕分辨率并应用对应的CSS。

      以上两点都应该不依赖与JS。

      实现第一点依靠的是流式布局。就是所有参与布局的DIV都用float:left,宽度都用百分比表示。比如下图,黄色部分的宽度是60%,橘色宽度是40%。

      

网站制作

     

      如果将黄色和橘色的宽度都width=100%,那么从1行变成2行了,如下图。从而实现不修改Dom实现布局变化。

      

网站制作

     

      那么如何不使用JS而实现动态调整CSS样式就是第二个关键点。

      HTML5中提供了一种新的CSS语法——@media,学名是Media Query,可以为不同的分辨率设定不同的样式。

      CSS

      /* Phone Portrait (320px) */

      @media only screen and (max-width: 320px) {

      #head { width: 100%; }

      #main { width: 100%; }

      #foot { width: 100%; }

      #left { width: 100%; }

      #right { width: 100%; }

      }

      复制代码

      上面这段代码的含义就是当屏幕宽度小于等于320像素时应用大括号中的样式。

      下图是在CSS生效时在浏览器中的效果:

      

网站制作

     

      @media还有一些更复杂的用法,比如:

      CSS

      /* Phone Landscape (480px) */

      @media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {

      复制代码

      这段语句就是针对iPhone横屏的。即,浏览器宽度在321-480像素之间,且方向是“横向”时生效。

      不过自从Retina这中妖艳的屏幕推出,分辨率已经不能代表世界的真相了。小小的Note3的分辨率比一些17“显示的分辨率还高。

      所以还有必要判断一下设备的像素密度-device-pixel-ratio。

      CSS

      @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

      复制代码

      比如上面的语句就是判断终端的像素比是2的话,所渲染的样式。可以适用于iPhone4,iPhone5等设备。

      除了上述两点,还需要在页面上增加一个viewport的meta标签,否则在手机上可能会有页面自动缩放的情况。例如:

      HTML

      复制代码

      总结一下:响应式布局有三个关键点:

      流式布局 Liquid Layout

      Media Query

      viewport

      具体细节就请大家自己研究相关的语法了。

      Media Query的语法比较复杂,这里个大家推荐一个工具,可以方便的设计布局,并可以针对各种设备自动生成Media Query的语句:

      http://www.responsivewebcss.com/

      

网站制作

     

      

网站制作

     

      

网站制作

     

声明:转载此文是出于传递更多信息的目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢!