rem让手机站自适应如此简单

最新推荐文章于 2020-06-09 18:52:08 发布

暖宝宝兰宝宝

最新推荐文章于 2020-06-09 18:52:08 发布

阅读量2.2k

点赞数 2

本文链接：https://blog.csdn.net/u011313703/article/details/50372993

版权

有css与js两种方式来调整html元素大小的值。

css方式

html { font-size: calc(100vw / 3.75) }

100vw表示设备宽度，除以3.75这里是以iphone6 的宽度375px为标准，为了保证html的字体大小为100px。这样我们在换算的时候，1px 就是0.01rem，就很容易计算。

因为chrome下最小字体大小为12px，所以不能把html的font-size设置成1px或者10px，100px是我们最好的选择。

js方式，原理与css一样，不过为了避免在一些老旧一点的手机浏览器上不支持calc，vm这些属性，在实际应用中使用js是最好的。

document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
$(window).on('resize', function() {
    document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})

##### 需要注意的地方

一、rem的适用性很有局限，仅仅只能够用于只在移动端展示的页面。如果你的页面还需要适配到pc端，那么就老老实实的使用px吧。

二、自己只是用来放在移动端的页面，别人却在pc上打开了，因此可以设置一个html的最大宽度与最小宽度。580px就是手机上浏览器的最大宽度。

html {
    max-width: 580px;
    min-height: 320px;
}

三、有的同学可能对web的适配有点误解。web中做适配并不需要考虑什么物理像素啊，dpi等等概念。这些应该仅仅只是Android或者ios原生app才会考虑的问题。这些误会导致许多搞设计的同学在给web app做设计的时候，也丢一张1080 x 1920 的设计稿过来，真是愁死人了。

那么回到这个问题中来，设计稿是750x1500的应该怎么办？其实这个还好，750刚好就是375的2倍，iPhone6的宽度。因此量出来的尺寸直接除以2就行了。如果是1080x1920等很大很大的尺寸呢？1.首先保存整张设计稿.jpg 2.新建一个psd，宽度375px，高度1000px(高度可以高一点，无所谓) 3.将保存的设计稿.jpg丢进去。这样量出来的页面元素的尺寸，就是你需要的尺寸。

ps：最好的方法，就是让设计师用sketch出设计稿。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none; color:#666666;}
a:hover{text-decoration:none; color:#666666;}
a:after{text-decoration:none; color:#666666;}
body{width:100%; color:#666666;}
.loginfo{height:1.4em;border-bottom:2px solid #e0e0e0;clear:both;}
.log_content{padding-top:.3em;}
.loginfo .loginfoLeft{width:1.7em;float:left;height:100%;}
.loginfo .loginfoLeft img{width:.5em;height:.8em;display:inline-block;margin-left:.7em;}
.loginfo .loginfoRight{margin-left:1.7em;height:100%;}
.log_tit{font-size:.36em;color:#666666;}
.log_detail{font-size:.28em;color:#808080;padding-top:.2rem;}
</style>
<script src="js/jquery.min.js"></script>
<script>
!function(n) {
var e = n.document,
t = e.documentElement,
i = 720,
d = i / 100,
o = "orientationchange" in n ? "orientationchange": "resize",
a = function() {
var n = t.clientWidth || 320;
n > 720 && (n = 720),
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);
</script>
</head>

<body>
<div class="loginfo">
<div class="log_content">
<div class="loginfoLeft"><img src="images/Mobile.png" /></div>
<div class="loginfoRight">
<div class="log_tit">手机认证</div>
<div class="log_detail">拥有此图标的用户，已经通过手机认证。</div>
</div>
</div>
</div>
<div class="loginfo">
<div class="log_content">
<div class="loginfoLeft"><img src="images/Strength.png"/></div>
<div class="loginfoRight">
<div class="log_tit">实名认证</div>
<div class="log_detail">拥有此图标的用户，已经通过实名认证。</div>
</div>
</div>
</div>
<div class="loginfo">
<div class="log_content">
<div class="loginfoLeft"><img src="images/Capital.png"/></div>
<div class="loginfoRight">
<div class="log_tit">资金认证</div>
<div class="log_detail">拥有此图标的用户，已经通过实名认证。</div>
</div>
</div>
</div>
<div class="loginfo">
<div class="log_content">
<div class="loginfoLeft"><img src="images/Firm.png"/></div>
<div class="loginfoRight">
<div class="log_tit">实盘认证</div>
<div class="log_detail">拥有此图标的用户，已经通过实盘认证。</div>
</div>
</div>
</div>
</body>

</html>

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

暖宝宝兰宝宝

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem让手机站自适应如此简单

无标题文档*{margin:0;padding:0;}a{text-decoration:none; color:#666666;}a:hover{text-decoration:none; color:#666666;}a:after{text-decoration:none; color:#666666;}body{width:100%; color:#666666;}
复制链接

扫一扫