关于响应式页面的几种处理方法

• 2021-01-12
  我本来还看了一些网页设计的课程，本来想找里面的一部分内容来着，结果怎么也找不到当时的笔记了，唉怪我自己没收好，生气

一、使用框架实现响应式

做响应式最简单方便的就是用现成的框架或者UI库，常见的有Bootstrap、ElementUI、LayUI等等，这里拿Bootstrap来举例：

1. 栅格系统

大部分框架都有栅格系统，我们可以根据这个直接来规定不同设备上的布局，省去了很多手写的麻烦。

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
最大列（column）宽	自动	~62px	~81px	~97px

Bootstrap把每一行分成12列，使用的时候在类名上加上我们想要的行宽，系统就可以自动分配了。

<div class="row">
  	<div class="col-xs-12 col-md-4">1</div>
  	<div class="col-xs-12 col-md-4">2</div>
  	<div class="col-xs-12 col-md-4">3</div>
</div>

这部分的代码在手机上是一列展示的，在电脑上就是三列展示的。

2. 响应式工具

除了栅格系统，Bootstrap 自带的响应式工具也可以帮助我们快速的搭建响应式页面。

可以通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面 (≥992px)	大屏幕 桌面 (≥1200px)
.visible-xs-*	可见	隐藏	隐藏	隐藏
.visible-sm-*	隐藏	可见	隐藏	隐藏
.visible-md-*	隐藏	隐藏	可见	隐藏
.visible-lg-*	隐藏	隐藏	隐藏	可见
.hidden-xs-*	隐藏	可见	可见	可见
.hidden-sm-*	可见	隐藏	可见	可见
.hidden-md-*	可见	可见	隐藏	可见
.hidden-lg-*	可见	可见	可见	隐藏

用法类似栅格系统，添加对应的类名就可以了，可以控制在不同页面中的页面布局。

二、手写CSS实现响应式

其实我个人用CSS手写的方法比较多，因为在不同设备下，每个内容块的展示方式、布局或者大小可能都是不一样的，栅格系统能够帮我们更改布局，但是更多的比如字体大小这种样式还是要我们重新设置的，手写的话可以一边设置布局，一边就把样式也完成了。

1. 媒体查询（@media）

想要手写响应式页面，最最基础的当然是媒体查询。

有很多媒体类型都已经被废弃不用了，我个人比较常用的是这两个：

• max-width：最大宽度。
• min-width：最小宽度。

body {
    background-color: red;
}
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}

在屏幕宽度小于 768px 时，body 是绿色，不然就是红色。

要注意，先写通用样式，然后从小往大写。
因为小屏幕的样式比较少，如果先写大屏幕样式，有了浮动或者定位，要清除起来就比较麻烦。

2. 设置 Meta 标签

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

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

3. 宽度设置

元素的宽度用百分比（%）或者 vw、vh 这个不用我多说了吧~
不光响应式，普通PC页面肯定也是要这样设置的。

另外，可以给元素设置最大宽度（wax-width）和最小宽度（min-width）控制缩放量。
比如这个页面的主体内容我希望他占页面的60%，但是最小也不要低于1000px：

.main{
	width: 60%;
	min-width: 1000px;
}

4. 计算尺寸

计算尺寸可能对于响应式来说没那么友好，因为一个元素的宽度我想要跟页面保持一致（100%），但是两边的边距我又想固定（20px）。这个时候就可以利用盒模型来实现啦~

可以参考我之前写过的文章~
css盒子模型和样式更改: 点这里跳转。