我对响应式布局的见解

小灰灰 2022-01-12 06:47 173阅读 0赞

在刚接触响应式布局的时候，认为就是在拖拽网页的时候页面的内容随着页面的缩小和放大一起进行等比例的缩小和放大，结果等学过了一些WEB前端之后我明白 了响应式布局是一个网站能够兼容多个平台的布局的一种方式，它的优点有：面对多个不同分辨率的设备能够灵活的改变自身的布局，而它的缺点也很明显：它在适 应各个设备的同时也增加了代码的累赘，在兼容各种设备是工作量大，会使页面的加载变慢。

响应式布局主要有三种方式：1.使用@media媒体对象查询功能来做，它可以规范不同屏幕的网页布局，但缺点是代码量大，会使页面加载时变慢，

@media screen and (max-width: 300px) \{  
 　　　　　　　　　　　　　　　　　　 body \{  
　　　　　　　　　　　　　　　　　　　　 background-color:blue;  
　　　　　　　　　　　　　　　　　　 \}  
　　　　　　　　　　　　　　　　\}

这句代码就是一个简单的媒体对象查询，我们可以对他进行一些剖析：

@media就是表明你要创建一个媒体查询，它是放在style标签里面的。

screen是用于电脑屏幕，平板电脑，智能手机等。

and是和的意思

max-width: 300px是最小屏幕是300像素的时候

这行代码就是说当设备处于电脑屏幕，平板电脑，智能手机和屏幕大于300像素的时候它会使body里的背景变成蓝色。

它还有一些其他的属性：

**　　　　　　　　　　　　　　　　width:**浏览器可视宽度。

**height**:浏览器可视高度。

**device-width**:设备屏幕的宽度。

**device-height**:设备屏幕的高度。

**orientation**:检测设备目前处于横向还是纵向状态。

**aspect-ratio**:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

**device-aspect-ratio**:检测设备的宽度和高度的比例。

**color**:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）

**color-inde**x:检查设备颜色索引表中的颜色，他的值不能是负数。

**monochrome**:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）

**resolution**:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

**grid**：检测输出的设备是网格的还是位图设备

2.在布局的时候尽量用百分比布局，这样的好处就是在屏幕在改变的时候，它的布局也会相应的进行一些放大和缩小，缺点就是不会变换整体的布局，使一些在pc端相对比较小的元素在移动端上会更小，不利于用户的体验。

3.使用设置meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释：

**width = device-width：**宽度等于当前设备的宽度

**initial-scale：**初始的缩放比例（默认设置为1.0）

**minimum-scale：**允许用户缩放到的最小比例（默认设置为1.0）

**maximum-scale：**允许用户缩放到的最大比例（默认设置为1.0）

**user-scalable：**用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标 签，会给你带来意想不到的效果，meta 标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显 示的窗口等。

转载于:https://www.cnblogs.com/12315peixin/p/5823592.html