响应式布局

来源：互联网发布：qq群发广告软件编辑：程序博客网时间：2024/06/06 02:27

一、什么是响应式布局？

通俗的来讲，就是根据屏幕的宽度，自动调整网页div显示和布局，以适应不同尺寸屏幕，优化浏览体验。

在pc上你可能看到是这样的：

在小屏幕或者平板上看到是这样的

二、响应式设计的三要素

1、流体网格 2、响应式图片 3、媒体查询

三、响应式设计步骤

1、设置Meta标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 
maximum-scale=1.0, minimum-scale=1.0">
viewport:用户网页的可视区域
width=device-width:设置宽度为设备的宽度
user-scalable=no:不允许用户缩放
initial-scale:初始缩放比例
maximum-scale:允许用户缩放的最大比例
minimun-scale:允许用户缩放的最小比例

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

Media Queries是响应式的核心
它是根据条件告诉浏览器如何为指定视图渲染页面，假如一个终端的分辨率小于980px,那么可以这样写：
@media (max-width: 980px) {  #head { … }  #content { … }  #footer { … }}
这里的样式就会覆盖上面已经定好的样式。

四、一些需要注意的地方：

1、宽度需要设置百分比
2、响应式图片宽度设为100%
使用<picture>标签，在不同大小屏幕之下显示不同图片
<picture>
<source srcset="./images/banner01-small.jpg" media="(max-width:768px)">
<source srcset="./images/banner01_middle.jpg" media="(max-width:992px)">
<source srcset="./images/banner01.jpg">
<img src="./images/banner01.jpg" alt="">
</picture>

五、弹性网格

可以把大盒子分成12列，告诉每个小盒子分别占几列，大屏幕的时候占几列，小屏幕的时候占几列，这样会随着屏幕的大小而产生不同的效果，满足了响应式设计。下面的代码就可以利用到响应式布局中。

/*网格系统*/.col-1{width:8.33%;}.col-2{width:16.66%;}.col-3{width:25%;}.col-4{width:33.33%;}.col-5{width:41.66%;}.col-6{width:50%;}.col-7{width:58.33%;}.col-8{width:66.66%;}.col-9{width:75%;}.col-10{width:83.33%;}.col-11{width:91.66%;}.col-12{width:100%;}[class*="col-"]{box-sizing: border-box;float:left;padding:7px 8px;}.row:after{content:"";display:block;clear:both;}.row::after{content:"";display:block;clear:both;}

阅读全文

1 0