移动端浏览器适配经过漫长的迭代,经历了以下的技术方案。
媒体查询
通过使用媒体查询,根据设备的屏幕尺寸、分辨率等媒体特性来调整布局和样式。比如bootstrap,或者jqueryUI,,这种方式维护成本高。
实际应用
在实际应用中,我们可以根据不同的设备屏幕尺寸,使用媒体查询来加载不同的css文件。比如:
// 小屏幕设备(横向手机,宽度 576px 及以上)
@media (min-width: 576px) { }
// 中等屏幕设备(平板,宽度 768px 及以上)
@media (min-width: 768px) { }
// 大屏幕设备(桌面端,宽度 992px 及以上)
@media (min-width: 992px) { }
Rem 布局适配
rem是css3新引入的单位,是相对于html元素字体单位的一个相对单位,从本质上来说,它属于一个字体单位,用字体单位来布局,并不是太合适。
实际应用
lib-flexible
+ postcss-pxtorem
,在相当长一段时间里,这两个插件搭配都是解决移动端布局的神器,lib-flexible
是阿里手淘系开源的一个库,用于设置font-size,同时处理一些窗口缩放的问题。在pc端会有兼容性的问题,对移动端比较友好。
// 引入lib-flexible
import 'lib-flexible'
// 引入postcss-pxtorem
import postcssPxToRem from 'postcss-pxtorem'
// 配置postcss-pxtorem插件
postcss.config({
plugins: [
postcssPxToRem({
rootValue: 16, // 1rem的大小,根据设计稿的字体大小来设置
propList: ['*'], // 要转换的属性,* 表示所有属性
}),
],
})
设置viewport进行缩放
在html页面中,使用meta标签来设置viewport,以控制网页在不同设备上的缩放行为。
实际应用
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在上述代码中,width=device-width表示将viewport 的宽度设置为设备的宽度,以实现响应式布局。initial-scale=1.0表示初始缩放比例为 1.0,即不进行缩放。 你可以根据需要调整initial-scale的值来控制网页的初始缩放比例。例如,将其设置为initial-scale=1.2将使网页在加载时放大 20%。
注意
请注意,不同的设备和浏览器可能对 viewport 设置有不同的支持和默认行为。
viewport的各个属性介绍如下:
属性 | 含义 |
---|---|
width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device" |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
maximum-sacle | 允许用户的最大缩放值,为一个数字,可以带小数 |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 |
height | 设置layout viewport 的高度,这个属性对我们并不重要,很少使用 |
Vw 布局适配
vw和vh是viewport单位,它们是基于视窗(viewport)宽度和高度的相对单位。vw表示相对于视窗宽度的百分比,而vh表示相对于视窗高度的百分比。常用技术方案:postcss-px-to-viewport 需要考虑浏览器兼容性。
实际应用
// 引入postcss-px-to-viewport插件
import postcssPxToViewport from 'postcss-px-to-viewport'
// 配置postcss-px-to-viewport插件
postcss.config({
plugins: [
postcssPxToViewport({
rootValue: 16, // 1vw的大小,根据设计稿的字体大小来设置
propList: ['*'], // 要转换的属性,* 表示所有属性
}),
],
})
px + calc + clamp 布局适配
根据 CSS 的新特性:css变量、calc()函数、clamp()、@container函数实现
实际应用
:root {
--design-width: 750; // 设计宽度
--viewport-width: 100vw; // vw宽度
--min-viewport-width: 320px; // 最小宽度
--max-viewport-width: 1440px; // 最大宽度
--current-viewport-width: clamp( var(--min-viewport-width), var(--viewport-width), var(--max-viewport-width) ); // 当前宽度
--width-ratio: calc(var(--current-viewport-width) / var(--design-width)); // 当前宽度/设计宽度
}
body {
font-size: calc( 20 * --width-ratio);
}
推荐rem + vw 布局适配
- 固定vieport,元素布局上使用rem单位
- html元素的font-size使用vw + px fallback的形式 列如:京东
- 当页面超过一定宽度时,根据media query设置font-size为px,优先级高于vw。
- 限制页面宽度为1080px