有关响应式的手记
一个「不务正业」的后端开发，聊了聊前端响应式开发的那点事儿。
一、什么是响应式
响应式的提出，是为了解决移动端设备在互联网浏览的问题。
上图是本人的移动端日均使用时间。四舍五入下来，业余时间使用电脑小于等于 2 小时 。
所以，你的移动端日均使用时间 VS 电脑日均使用时间，是怎么样的呢 ？？？
二、响应式存在的问题
1、像素密度 Pixel Per Inch
每英寸所拥有的像素数量，简称 PPI。
PPI 与显示器硬件相关，不同的移动设备 PPI 各有不同，PPI 越高显示的内容越细腻。
2、CSS 像素
也称为虚拟像素，这是由开发人员进行设定。
3、视口 Viewport
区分为布局视口 Layout Viewport、视觉视口 Visual Viewport。其中，视觉视口是用户能看到的部分，而布局视口是开发人员能使用到的部分。
例如：显示书签栏，对开发人员来说可操作区域变小了。对用户来说，网站 A 显示的区域变小了，但是书签栏属实很方便啊。
三、解决方式
1、相对单位
px | 常用单位，不受页面缩放影响。 |
|---|---|
em | 相对单位，相对于最近的父元素。子元素字体大小的 px / 父元素字体大小的 px = em |
rem | 想对单位，相对于根 html 元素子元素字体大小的 px / 根元素字体大小的 px = rem。 |
rem 为例：
假设，浏览器默认字体大小为：16px；
此时，有 html {font-size: 62.5%;}；// 16 * 0.625 = 10
可得，1rem == 10px，2rem == 20px。
2、布局 - 媒体查询
媒体类型
all | 所有类型 |
|---|---|
打印机以及打印预览 | |
screen | 电脑、平板、手机等屏幕 |
speech | 屏幕阅读器 |
媒体功能（简略版）
max-device-width | 输出设备最大可见域宽度 |
|---|---|
max-width | 页面最大可见域宽度 |
min-device-width | 输出设备最小可见域宽度 |
min-width | 页面最小可见域宽度 |
举一个栗子：
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}3、移动设备 APP
土豪版解决方案，各移动端原生 APP 方案。
四、结束 ~
主流前端框架都涵盖了「响应式」，就连国内外手机旗舰款售价都直逼电脑了。所以，移动端会越来越主流，而「响应式」也会原来越重要。
学好「响应式」，做一个好后端开发程序猿。👨🏻💻
腾讯云开发者
