响应式布局

2017-09-11 本文已影响109人 DJL箫氏

由于最近想开发一款响应式系统，之前对于响应式都只是略有了解，没有怎么归纳整理，现在来做一个总结。

@media媒体查询

响应式布局一定离不开媒体查询。

media mediatype and|not|only (media feature) {
    CSS-Code;
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

在这里mediatype一般是screen，在这里media feature一般是max-width、min-width定义的是可见区域。你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

当然在手机端我们一般是会禁止缩放的

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

bootstrap 栅格系统实现

http://v3.bootcss.com/css/#grid

这个开发工具是基于bootstrap的http://www.layoutit.com的布局工具

bootstrap中是使用float来进行布局，然后通过伪元素来进行浮动清除

@media (min-width: 992px)
.col-md-4 {
    width: 33.33333333%;
}
@media (min-width: 992px)
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
    float: left;
}

.row:after, .row:before {
    clear: both;
    display: table;
    content: " ";
}

主流屏幕尺寸定义

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

图片

img { max-width: 100%; }

当然还有一种比较巧妙的方式

![](image.jpg)

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
 
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

也就是会根据不同尺寸，加载不同的图片资源，这个方法非常巧妙。data-*允许我们可以在HTML元素中存储一些数据。而且我们可以很方便的通过el.dataset来进行存取删除等等。

字体

另一个比较重要的就是字体的运用，em是根据父元素的font-size来进行计算，rem是根据根元素html的font-size来进行计算。

html { font-size:100%; }

@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }

移动端1px效果

css中的1px并不总是等于物理像素1px。
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。例如在devicePixelRatio为2的设备中，我们设置1px，实际上是有两个物理像素的，关于移动端的1px解决办法，可以参考这篇文章。
http://www.cnblogs.com/lunarorbitx/p/5287309.html
http://blog.csdn.net/yuhk231/article/details/53976295

调试技巧：我们可以通过[]草料二维码生成器](https://cli.im/)生成二维码。然后手机扫码，就可以在手机上看到电脑上的页面。当然手机和电脑必须要在同一局域网。而且要用IP访问，也就是将localhost换成你的电脑IP地址。由于我使用的是webpack构建的项目，需要进行如下配置：

"dev": "webpack-dev-server -d --hot --inline --colors --progress --env.dev --public --host 0.0.0.0",

然后在webpack-dev-server中配置disableHostCheck: true

devServer: {
    // 配置监听端口
    port: 8080,
    disableHostCheck: true
}

参考资料

http://www.cnblogs.com/lhb25/archive/2013/03/06/making-a-website-responsive-in-3-easy-steps.html