移动端适配方案

最新推荐文章于 2020-04-09 22:32:30 发布

阿川阿川

最新推荐文章于 2020-04-09 22:32:30 发布

阅读量175

点赞数

分类专栏： style 文章标签： rem

本文链接：https://blog.csdn.net/tangkthh/article/details/102559285

版权

style 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

移动端适配方案

移动端可以用px+flex

动态改变html的font-size 配合 rem

一、移动端可以用px+flex

使用方法是，将最外层容器设置display: flex;内层元素正常写就可以。需要注意的是如果flex不能完全达到要求适配，就使用媒体查询。

二、动态改变html的font-size 配合 rem

方法一：一般来说设计师给的移动端ui设计图为：750的宽度，是2倍图；750；通过换算，如果是750那么dpr为2

自定根元素<html>字体大小为14px。

例如：设计图按钮56px，换算方式：1rem = 14px。所以56px：56/ dpr/ 14 = 2rem。在css里写2rem。

方法二：方案：rem计算

基准：320px的屏幕基准像素为12px

通过方法计算：

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

得到：通过媒体查询来设置根元素字体大小

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

方法三：

rem 基准值计算

设计图一般是750的设计图，是iphone6的2倍，那么使用这个尺寸来计算基准值。

基准值：750 / 10或者750 / 2 / 10（750设计图）基准值<html>：font-size：75px或37.5px。

例如：设计图中100px的按钮，100 / 75 或 100 / 2 / 37.5

document.addEventListener('DOMContentLoaded', function(e) {
    document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
}, false);

其他设备尺寸：

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px / 10 = 32px

iphone6: 375px / 10 =37.5px

阿川阿川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端适配方案

移动端适配方案移动端可以用px+flex动态改变html的font-size配合rem一、移动端可以用px+flex使用方法是，将最外层容器设置display: flex;内层元素正常写就可以。需要注意的是如果flex不能完全达到要求适配，就使用媒体查询。二、动态改变html的font-size配合rem方法一：一般来说设计师给的移动端ui设计图为：750的宽度，...
复制链接

扫一扫

专栏目录