响应式布局应该包括以下几点:
1、CSS3.0媒介查询;
我们所做的html文件都是在浏览器的解析下显示的,在PC端,在手机浏览器中都是可以的,唯一所不同的就是浏览器的视界窗口不同而已。在css3中使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。我们所要做的就是在页面中的<head>标签之中加入<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ;
当然我们的css3媒介查询是建立在支持css3的基础上,支持CSS3的浏览器的情况看下图;
再看下css3.0媒介查询的使用,通过在不同宽度的情况下,使用不同的样式,页面自适应布局;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0"> <title>改变窗口大小有惊喜</title> <style type="text/css"> body { background-color: grey; } @media screen and (max- 960px) { body { background-color: red; } } @media screen and (max- 768px) { body { background-color: orange; } } @media screen and (max- 550px) { body { background-color: yellow; } } @media screen and (max- 320px) { body { background-color: green; } } </style> </head> <body> <p>改变窗口大小有惊喜哟!</p> </body> </html>
2、百分比对应绝对像素宽度;
在响应式布局中,我们一般会使用max-width属性来约束页面的最大宽度,然后在此情况下做百分比宽度;当然这个百分比的使用,遵循一个原则:目标元素宽度÷上下文元素宽度=百分比宽度,如我们总的宽度在980px的情况下再定位一个居中块级宽度为960px的元素,这时候用960/980 得到即为百分比的数值;
3、字体单位em对应觉得像素px;
字体的定值大小不能为绝对像素px,要用相对像素单位em,具体计算方式请参阅这片博客,做一个引路人强大的em;
4、自适应图片;
自适应图片属性:
img { border: 0; max- 图片本来像素大小 百分比 }当然图片的大小要通过所处上下文的情况的;
5、display属性的灵活利用;
在移动前端布局中,display属性可以简化很多复杂的布局,上一篇博客讲到细说CSS中的display属性,另外我们还提供一种自适应布局,display: flex;具体请参考flex属性;
6、万能的max-width;
max-width的使用其实很简单,灵活使用可以使我们的页面适应不那么僵硬!