By
cnFeat
更新日期:
REM布局
1.我们以宽度960px为标准，在html设置font-size：100px;
若需要200px的宽度，那么200px=2rem；
2.先算项目网页的总宽度与960px之间的比例，如果是960px为标准的就不用重新算比例；
例如:
项目总宽度1130px;
要设置元素的宽度是600px;
我要制作的网页的这个元素宽度=960*600/1130/100 单位rem.
不同屏幕下htmld的字体大小
（自己写的，存在一点点误差）
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
| @media screen and (max-width:768px) {
html{
font-size: 80.08px;
}
}
@media screen and (max-width:641px) {
html{
font-size: 66.67px;
}
}
@media screen and (max-width:435px) {
html{
font-size: 45.35px;
}
}
@media screen and (max-width:414px) {
html{
font-size: 42.86px;
}
}
@media screen and (max-width:375px) {
html{
font-size: 39.1px;
}
}
@media screen and (max-width:360px) {
html{
font-size: 37.54px;
}
}
@media screen and (max-width:320px) {
html{
font-size: 33.33px;
}
}
|
最后提醒记得加上
1
| <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
