响应式布局

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

@media媒体查询

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

1
2
3
4
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-widthmin-width定义的是可见区域。你也可以针对不同的媒体使用不同 stylesheets :

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

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

1
<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来进行布局,然后通过伪元素来进行浮动清除

1
2
3
4
5
6
7
8
@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;
}

1
2
3
4
5
.row:after, .row:before {
clear: both;
display: table;
content: " ";
}

主流屏幕尺寸定义

1
2
3
4
5
6
7
8
9
10
11
/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

图片

1
img { max-width: 100%; }

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

1
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

1
2
3
4
5
6
7
8
9
10
11
@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是根据根元素htmlfont-size来进行计算。

1
html { font-size:100%; }

1
2
3
@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

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

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

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

1
2
3
4
5
devServer: {
// 配置监听端口
port: 8080,
disableHostCheck: true
}

参考资料

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

文章目录
  1. 1. @media媒体查询
  2. 2. bootstrap 栅格系统实现
  3. 3. 主流屏幕尺寸定义
  4. 4. 图片
  5. 5. 字体
  6. 6. 移动端1px效果
  7. 7. 参考资料
|