第一种方法:
/*
用媒体查询去改变html中font-size的值
然后项目中的rem根据html中的font-size的值发生变化
*/
@media screen and (max-width:320px ) {
html{font-size: 12px;}
/*
1rem = 12px;
*/
}
@media screen and (min-width:321px) and (max-width:375px ) {
html{font-size: 14px;}
/*
1rem = 14px;
*/
}
@media screen and (min-width:376px ) {
html{font-size: 16px;}
/*
1rem = 16px;
*/
}
第二种方法vw;
vw = 从设计图上量出的大小 * 100 / 设计稿的宽度
第三种方法(vw结合rem):
设计图640px
模拟器320px
dpr = 2
640px / 2 = 320px;(320px占视口的100%)
得到1份的px值
320px / 100 = 3.2px
1vw = 3.2px
目的给html设置font-size:100px;(100px固定不变,不会进行拉伸)
?vw = 100px
100px / 3.2px = 31.25vw
开始操作:
首先设置html中的font-size:31.25vw;
开始计算:
例如从设计图上量出元素大小为400px;
根据dpr = 2;
所以400px / 2 = 200px;
?rem = 200px /100px(上面设置的31.25vw就是100px);
所以得到rem的值 = 2rem;
******项目整体布局 > 弹性盒子
******移动项目前提设置 :