这些前端响应式布局作为前端人员必须掌握

概念

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

步骤

1. 设置 Meta 标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率，可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度，按1：1的尺寸显示并禁止初始的缩放。在<head>标签里加入这个meta标签。

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

2.通过媒体查询来设置样式Media Queries

Media Queries 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写:

1 // 这里面的样式会覆盖掉之前所定义的样式
2 @media screen and (max- 980px) {
3   #head { … }
4   #content { … }
5   #footer { … }
6 }

3.设置多种视图宽度

假如我们要兼容ipad和iphone视图，我们可以这样设置：

1 /**ipad**/
2 @media only screen and (min-768px)and(max-1024px){}
3 /**iphone**/
4 @media only screen and (320px)and (768px){}

4.字体设置

到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。rem是相对于根元素的，不要忘记重置根元素字体大小：

1 html{font-size:100%;}
2 完成后，你可以定义响应式字体：
3 @media (min-640px){body{font-size:1rem;}}
4 @media (min-960px){body{font-size:1.2rem;}}
5 @media (min-1200px){body{font-size:1.5rem;}}

5.注意事项

宽度需要使用百分比

1 #head {  100% }
2 #content {  50%; }

处理图片缩放的方法

给图片指定的最大宽度为百分比。假如图片超过了，就缩小；假如图片小了，就原尺寸输出:

1 img {  auto; max- 100%; }

用::before和::after伪元素 +content 属性来动态显示一些内容。在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能。

 1 // HTML 结构
 2 <img src="image.jpg"
 3     >600px="image-600px.jpg"
 4     >800px="image-800px.jpg"
 5      alt="">
 6 
 7 // CSS 控制：
 8 @media (min-device-600px) {
 9     img[>600px] {
10         content: attr(>600px, url);
11     }
12 }
13 @media (min-device-800px) {
14     img[>800px] {
15         content: attr(>800px, url);
16     }
17 }

除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

 1 #log a{
 2     display:block;
 3     100%;
 4     height:40px;
 5     text-indent:55rem;
 6     background-img:url(logo.png);
 7     background-repeat:no-repeat;
 8     background-size:100% 100%;
 9 }
10     // background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定一个值，那么另一个值默认为auto。
11     // background-size:cover; 等比扩展图片来填满元素
12     // background-size:contain; 等比缩小图片来适应元素的尺寸

其他属性

例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：

1 table th, table td { padding: 0 0; text-align: center; }

转载请注明来源: 办公资源网址导航 https://www.wode007.com