手机端rem配置及媒体查询

手机端rem配置及媒体查询
手机端meta标签配置
rem根据页面宽度调整根字体大小
媒体查询
px2rem插件在vue中的使用方法（把px转换为rem）
手机端meta标签配置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
1
rem根据页面宽度调整根字体大小
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 24 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// 这里在640的设备上1rem = 24px，在其他屏幕宽的时候会自动根据这个比例来动态调整
1
2
3
4
5
6
7
8
9
10
11
12
13
媒体查询
//第一种
@media screen and (min- 320px){html{font-size:312.5%} }
@media screen and (min- 360px){html{font-size:351.56%} }
@media screen and (min- 400px){html{font-size:390.63%} }
@media screen and (min- 440px){html{font-size:429.69%} }
@media screen and (min- 480px){html{font-size:468.75%} }
@media screen and (min- 520px){html{font-size:507.81%} }
@media screen and (min- 560px){html{font-size:546.88%} }
@media screen and (min- 600px){html{font-size:585.94%} }
@media screen and (min- 640px){html{font-size:625%} }

//第二种
//以750为基准设置font-size为100px
html{
font-size: 38px;
}
@media only screen and (min- 320px) {
html {
font-size: 42.666px !important;
}
}
@media only screen and (min- 360px) {
html {
font-size: 48px !important;
}
}
@media only screen and (min- 375px) {
html {
font-size: 50px !important;
}
}
@media only screen and (min- 414px) {
html {
font-size: 55.2px !important;
}
}
@media only screen and (min- 480px) {
html {
font-size: 64px !important;
}
}
@media only screen and (min- 560px) {
html {
font-size: 74.666px !important;
}
}
@media only screen and (min- 640px) {
html {
font-size: 85.333px !important;
}
}
@media only screen and (min- 720px) {
html {
font-size: 96px !important;
}
}
@media only screen and (min- 750px) {
html {
font-size: 100px !important;
}
}
@media only screen and (min- 800px) {
html {
font-size: 106.666px !important;
}
}
@media only screen and (min- 960px) {
html {
font-size: 128px !important;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
px2rem插件在vue中的使用方法（把px转换为rem）
1、安装px2rem-loader

npm install px2rem-loader
1
2、配置px2rem-loader

//在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 50, /* 此处50为可调整的值 */
remPrecision: 8 /* px转rem的精度 ,默认是6*/
}
}

同时把generateLoaders方法中这行
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
替换成这个
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
备注：remUnit: 50 /* 此处50为可调整的值 */此处50由设计稿尺寸决定（eg：当设计稿为375时，打开网页进入调试模式将网页宽度调整至与设计稿相同，得到的html的font-size即为需要设置的值）
默认是将所有的px转换为rem，对于那些不需要转换的如1px border可设置为/*no*/
即不转换为rem

border: 1px;/*no*/
font-size: 20px;/*px*/
————————————————
版权声明：本文为CSDN博主「haogemr」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/document_dom/article/details/88559032