工作中接触到了移动端的开发,所以最近学习一下移动端相关内容。
移动端适配的目的
让拥有不同屏幕大小的终端设备拥有一致的 UI 界面,让拥有更大屏幕的终端展示更多的内容
了解viewport
viewport 即视窗、视口,用于显示网页部分的区域,在 PC 端视口即是浏览器窗口区域,在移动端,为了让页面展示更多的内容,视窗的宽度默认不为设备的宽度,在移动端视窗有三个概念:布局视窗、视觉视窗、理想视窗
-
布局视窗:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站,移动设备上的浏览器都会把自己默认的 viewport 设为 980px 或其他值,一般都比移动端浏览器可视区域大很多,所以就会出现浏览器出现横向滚动条的情况
-
视觉视窗:终端设备显示网页的区域
-
理想视窗:针对当前设备最理想的展示页面的视窗,不会出现横向滚动条,页面刚好全部展现在视窗内,理想视窗也就是终端屏幕的宽度。
布局视窗
在移动端不设置视窗宽度时,页面宽度默认为 980px,页面可以左右滚动
视觉视窗
理想视窗
页面的宽度为视窗的宽度,页面没有横向滚动条
viewport 详细设置
通过设置 viewport
可以设置页面大小,通过 meta
标签可以设置 viewport
信息,代码如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-sacle=1, maximum-scale=1" >
viewport
需要搭配如下几个属性使用:
属性 | 含义 | 取值 |
---|---|---|
width | 定义视口的宽度,单位为像素 | 正整数或设备宽度device-width |
height | 定义视口的高度,单位为像素 | 正整数或device-height |
initial-scale | 定义网页初始缩放值 | 整数或小数,小数为缩小,反之放大 |
maximum-scale | 定义缩放最大值 | 整数或小数 |
minimum-scale | 定义缩放最小值 | 整数或小数 |
user-scalable | 定义用户是否可以缩放 | yes/no |
适配方案
将页面的宽度设置为设置的视窗宽度后,即可进行移动端适配工作了。
从适配的目的是在屏幕大小不同的终端设备拥有统一的界面,让拥有更大屏幕的终端展示更多的内容,从上面两个角度出发,核心思路是:页面内容充满整个视窗
1. rem 布局
rem
是CSS3新增的一个相对单位,它以 HTML
元素的 font-size
为比例:
/* 设置html元素的字体大小为 16px,即 1rem = 16px */
html {
font-size: 16px;
}
/* 设置box元素宽 160px,10rem = 160px */
.box {
width: 10rem; /* 160px */
}
修改HTML元素的字体大小可以成比例的调整以 rem
为单位的属性,通过这一个特性,我们可以实现将视窗按一定比例划分为一份一份的,当页面内元素刚好分完所有的份数,页面内容即充满整个视窗且无横向滚动条。
以宽度750像素的设计稿为例,有两个元素,一个元素占 550 个像素,另一个占 750 个像素:
// ...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="w-550px"></div>
<div class="full"></div>
<style>
*{
padding: 0;
margin: 0;
}
.w-550px {
width: 550rem;
height: 100px;
background-color: rgb(209, 255, 240);
}
.full {
width: 750rem;
height: 100px;
background-color: rgb(195, 200, 199);
}
</style>
<script>
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改
const scale = document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize = scale + 'px';
}
setRem();
window.onresize = setRem;
</script>
页面伸缩,网页布局也会进行伸缩。运行结果如下:
目前,除了IE8及更早版本外,所有浏览器均已支持rem。
1.1 搭配 postcss-pxtorem 搭建项目
- 使用 vue-cli 创建项目
vue create rem-demo
- 设置 viewport
<!-- rem-demo/public/index.html -->
<!-- 框架已经帮我们设置了,这里可以忽略 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
- 动态设置 rem 的值
创建 rem.js 文件:
// rem-demo/util/rem.js
// 设置基准大小
const baseSize = 32
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例
const scale = document.documentElement.clientWidth / 750
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
window.onresize = function () {
setRem()
}
引入 rem.js 文件:
// rem-demo/src/main.js
import './utils/rem'
- 安装并使用 postcss-pxtorem
安装 postcss-pxtorem
yarn add postcss-pxtorem --dev
npm i postcss-pxtorem --save-dev
使用 postcss-pxtorem
// rem-demo/vue.config.js
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue : 16, //(数字,函数) 根元素字体大小
unitPrecision: 5, //(数字)允许REM单位增长的十进制数字
replace: true, // (布尔值)替换包含rems的规则,而不添加后备
mediaQuery: false, // (布尔值)允许在媒体查询中转换px
minPixelValue: 0, // (数字)设置要替换的最小像素值
selectorBlackList : [], // 忽略转换正则匹配项
propList : ['*'], // 可以从px转换为rem的属性,匹配正则
exclude: /node_modules/i // (字符串,正则表达式,函数)要忽略并保留为px的文件路径
}),
]
}
}
}
}
- 运行结果
例如:设计稿为 750*1136,我们需要一个盒子宽 375px:
/* 按照设计稿的宽度编写 */
.box {
width: 375px;
height: 400px;
background-color: rgb(202, 246, 232);
}
/* 转换后 */
.box {
width: 23.4375rem;
height: 25rem;
background-color: #caf6e8;
}
/* 使用 Px 和 PX 作为单位,pxtorem 将不进行转换 */
1.2 总结
优点:rem 布局能很好的实现在不同尺寸的屏幕横向填满屏幕,且在不同屏幕元素大小比例一致
缺点:在大屏设备(Pad)上,元素尺寸会很大,页面显示更少的内容。
针对大屏改进方案:
在移动端浏览器 rem 方案是解决移动端适配的主流方案,这套方案的另一个名字叫做 flexible 方案,通过动态设置 rem 实现在不同尺寸的设备上界面展示效果一致。
在 lib-flexible 库里有这样一段话:
由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方。
可知,rem 方案的目的是解决 viewport
不兼容的问题,但是我个人认为,rem 的目的提供一种比例单位,不仅可以解决移动端适配问题,也还有其他的用处。
2. vw/vh 布局
vw/vh 方案与 rem 方案类似,都是将页面分成一份一份的,只不过 vw/vh 是将页面分为 100 份,1vw = device-width/100
2.1 搭配 postcss-px-to-viewport 搭建项目
- 使用 vue-cli 创建项目
vue create vw-demo
- 设置 viewport
<!-- rem-demo/public/index.html -->
<!-- 框架已经帮我们设置了,这里可以忽略 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
- 安装并使用 postcss-px-to-viewport
安装 postcss-px-to-viewport
yarn add postcss-px-to-viewport --dev
npm i postcss-px-to-viewport --save-dev
配置 .postcssrc.js
module.exports = {
plugins: {
autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
'postcss-px-to-viewport': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
landscape: false, // 是否处理横屏情况
},
},
};
- 运行结果
以 750*1136 的设计稿为例,设计一个宽 375px 的盒子
.test-vw {
width: 375px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 100px;
background: #13b5b1;
}
/* 转换后 */
.test-vw {
width: 50vw;
height: 13.333333vw;
font-size: 5.333333vw;
text-align: center;
line-height: 13.333333vw;
background: #13b5b1;
}
运行效果:
2.2 总结
优点:vw、vh布局能良好的实现在不同尺寸的屏幕横向填满屏幕,使用 postcss-px-to-viewport
能很好的帮我们进行单位转换
缺点:
- 无法修改 vw/vh 的值,在大屏设备(Pad)中元素会放大,且无法通过 js 干预
- 兼容性- 大多数浏览器都支持、ie11不支持 少数低版本手机系统 ios8、android4.4以下不支持
3. 百分比布局
在 css 中,我们可以使用百分比来实现布局,但是需要特定宽度时,这个百分比的计算对开发者来说并不友好,且元素百分比参考的对象为父元素,元素嵌套较深时会有问题。
案例:设计稿为 750*1136,我们需要一个宽度为 200px 的盒子
.box {
/* w = 200 / (750/100) = 26.66667 */
/* 可知,计算复杂,且会存在误差 */
width: 26.6%;
}
扩展: 子元素的 width
和 height
百分比参考对象是父元素的 width
和 height
,margin
、padding
的参考对象为父元素的 width
,border-radius
、background-size
、transform: translate()
、transform-origin
的参考对象为自身宽高
4. 响应式布局
通过媒体查询,可以针对不同的屏幕进行单独设置,但是针对所有的屏幕尺寸做适配显然是不合理的,但是可以用来处理极端情况(例如 IPad 大屏设备)或做简单的适配(隐藏元素或改变元素位置)
媒体查询案例:
body {
background-color: yellow;
}
/* 针对大屏产品 ipad pro */
@media screen and (min-width: 1024px) {
body {
background-color: blue;
}
}
5. px 为主,搭配 vw/vh、媒体查询与 flex 进行布局
先查看一下当前各大网站移动端适配的结果:
移动端适配的宗旨是:让拥有不同屏幕大小的终端设备拥有一致的 UI 界面,让拥有更大屏幕的终端展示更多的内容, 那么布局高度固定、宽度自适应的方案针对文本较多的网页(百度、网易)是更好的,针对大屏幕,腾讯网和荔枝FM的做法是限制最大宽度来让大屏有更好的体验。
我们从页面编写的角度出发,页面中更多的是文本和布局,关于文本,我们应该使用 px
作为单位,来实现在大屏设备显示更多的内容,而不是更大的文本;关于布局,我们可以使用 flex
实现弹性布局,当实现特定宽高元素时,可以适当的使用 vw/vh,当特定的值使用 vw/vh 计算复杂或存在误差时,也可以使用 rem
适配流程
- 编写
<meta>
标签设置viewport
的内容width=device-width
,让网页宽度等于视窗宽度 - 在 css 中使用 px
- 在适当的场景使用flex布局,或者配合vw进行自适应
- 在跨设备类型的时候(pc <-> 手机 <-> 平板)使用媒体查询
- 在跨设备类型如果交互差异太大的情况,考虑分开项目开发
总结
上文简单总结了 5 种移动端适配方案
当前最流行的依然是第一种 rem 布局,能很好的按照设计稿进行开发,搭配媒体查询能让很好的解决大屏问题,比如:腾讯网、荔枝FM
关于第二种 vw/vh 布局方案,我看到蛮多文章在推荐,由于还没有在项目中真正实践过,因为我们无法干预 vw/vh
的值,在大屏的体验应该不是很良好,所以我不能做判断
关于第五种 px
为主,搭配 vw/vh
、媒体查询与 flex
进行布局,个人认为部分地方可以引入 rem
,也能很好的按照设计稿开发,且能解决大屏问题,可以参见:淘宝网、百度、网易
在我个人看来,第五种方案是很好的,但是暂时还没找到一套方法论来进行论证
以上就是本文的全部,有不对的地方还请指正