一个「不务正业」的后端开发,聊了聊前端响应式开发的那点事儿。
一、什么是响应式
响应式的提出,是为了解决移动端设备在互联网浏览的问题。
上图是本人的移动端日均使用时间。四舍五入下来,业余时间使用电脑小于等于 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 方案。
四、结束 ~
主流前端框架都涵盖了「响应式」,就连国内外手机旗舰款售价都直逼电脑了。所以,移动端会越来越主流,而「响应式」也会原来越重要。
学好「响应式」,做一个好后端开发程序猿。👨🏻💻