H5移动端开发之基础字体大小设置

前段时间接触了h5移动端的开发，移动端字体大小不同于pc端一般直接用px单位，而是经常用rem作为基础单位，常规做法使用1rem=100px的换算方式，如果设计稿是375px作为整个屏幕端度的话，那么我们换算过的屏幕宽度则为3.75rem；如果设计稿是450px的话，屏幕宽度则为4rem。具体设置方法见如下代码：

<script>fnResize()window.onresize = function () {fnResize()}function fnResize() {let deviceWidth = document.documentElement.clientWidthdocument.documentElement.style.fontSize = (deviceWidth / 3.75) + 'px'}
</script>

我在页面index.html的script中写下上面代码，针对设计稿375px的总体宽度设置了1rem=375px/3.75=100px的宽度
这样在所有页面布局中可以将设计稿中的单位直接除以100得到rem单位去使用，类似如下

.home-page {height: 100%;width: 100%;font-family: "Source Han Sans CN";.above {margin: 0.18rem;height: 5.64rem;position: relative;background-image: url('../../static/home_page.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;.music {position: absolute;width: 0.32rem;height: 0.32rem;border-radius: 0.16rem;right: 0.01rem;top: 0.04rem;background-image: url('../../static/music.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;cursor: pointer;}.music-off {position: absolute;width: 0.32rem;height: 0.32rem;border-radius: 0.16rem;right: 0.01rem;top: 0.04rem;background-image: url('../../static/music_off.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;cursor: pointer;}.en {position: absolute;color: #BB1F3A;font-weight: 600;font-size: 0.14rem;top: 1.83rem;left: 0.18rem;}.ch {position: absolute;color: #BB1F3A;font-weight: 600;font-size: 0.28rem;top: 2.63rem;left: 0.18rem;}.button {position: absolute;top: 4.1rem;height: 0.44rem;width: 1.98rem;background-color: #BB1F3A;left: calc(50% - 0.99rem);border-radius: 0.04rem;font-size: 0.12rem;text-align: center;color: #FFF;cursor: pointer;.top {margin-top: 0.04rem;height: 0.17rem;line-height: 0.17rem;font-weight: 600;}.bottom {margin-top: 0.01rem;height: 0.17rem;line-height: 0.17rem;font-weight: 500;}}.img {position: absolute;width: 0.88rem;height: 0.4rem;top: 4.90rem;left: calc(50% - 0.44rem);background-image: url('../../static/home_logo.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}}.below {height: 0.59rem;margin: 0.18rem;.left {float: left;height: 100%;width: 50%;.img {width: 1.24rem;height: 0.32rem;margin-top: 0.135rem;background-image: url('../../static/left_logo.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}}.right {float: left;height: 100%;width: 50%;background-image: url('../../static/partner.png');background-repeat: no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}}.across {position: absolute;top: 0.45rem;width: 3.75rem;height: 1.08rem;color: #FFF;background-image: url('../../static/across.png');background-repeat: no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;text-align: center;.en {font-size: 0.13rem;margin-top: 0.32rem;height: 0.18rem;line-height: 0.18rem;font-weight: 400;}.ch {height: 0.33rem;font-size: 0.24rem;line-height: 0.33rem;font-weight: 600;letter-spacing: 0.016rem;}}
}

比如.cross中的width: 3.75rem;其实相当于设计稿中的375px的整体屏幕宽度
至于为什么一般以除以100作为1rem，而不是直接1rem=1px来直接使用呢？我也试过，直接用1rem=1px，那么像我们设计稿中的375px，则为375rem，而很多移动端浏览器不支持过大的rem单位，导致375rem这种单位实际显示的是很小的一个宽度，无法占满整个屏幕

H5移动端开发之基础字体大小设置相关推荐

android qq字体大小设置快捷键,电脑端QQ怎么将字体选择设置为气泡模式
电脑端QQ怎么将字体选择设置为气泡模式用惯了手机QQ的气泡模式,那么不妨把电脑也修改一下吧.今天小编就告诉大家电脑端QQ怎么将字体选择设置为气泡模式. 具体如下: 1. 打首先我们打开电脑中的QQ, ...
css设置字体大小会受分辨影响吗,CSS字体大小设置时的参考（转）
font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们是浏览器预定义设置的.给元素指定了绝对关键字font-size的时候,该元素就不会继承父元素的字体大小 font-s ...
浏览器字体大小设置_CSS之浏览器解析样式的过程
阅读本文约需要10分钟大家好,我是你们的导师,经常看我朋友圈的同学应该知道,我每天会在微信上给大家免费提供以下服务! 1.长期为你提供最优质的学习资源! 2.给你解决技术问题! 3.每天在朋友圈里分 ...
android控制台字体大小设置,Android studio 4.1 豆沙护眼色配置、字体大小设置、内存大小设置...
1.左边目录栏颜色配置: 2.代码编辑区域背景色设置 3.控制台背景色设置 4.菜单栏.工具栏.左边栏字体大小设置 6.修改内存大小.显示内存例如:修改android-studio/bin/stud ...
CSDN红色字体，蓝色字体，字体大小设置
CSDN字体颜色.字体大小设置一.红色字体方法一: 我是编程ID <font color=#900>我是编程ID</font> 方法2: 2.我叫编程ID `我叫编程ID` ...
js实现字体大小设置
开发背景:需要设置调整富文本里的字体大小. 1.实现代码: // el - 要设置字体的最外层元素,size - 字体大小,单位px function setFontSize (el, size) { ...
Android studio 豆沙护眼色配置、字体大小设置、内存大小设置等各类疑难杂症
Android studio 4.1 1.左边目录栏颜色配置: 2.代码编辑区域背景色设置 3.控制台背景色设置 4.菜单栏.工具栏.左边栏字体大小设置 5.编码区字体大小设置 6.修改内存大小.显示 ...
java eclipse字体大小设置_eclipse字体大小如何设置-eclipse字体大小设置方法 - 河东软件园...
Eclipse是一款Java的可扩展开发平台,用户在开发Java项目是都会选择使用Eclipse,而通过Eclipse进行编辑时,经常需要设置字体与大小,但由于许多用户大多下载的是英文版,所以不知道如 ...
eclipse护眼颜色和字体大小设置
♣eclipse护眼颜色和关键字颜色设置 ♣eclipse字体大小设置(包括jsp , .xml ,.java) 1.Eclipse字体大小调整: 窗口(Window)-首选项(Preference ...

H5移动端开发之基础字体大小设置

H5移动端开发之基础字体大小设置相关推荐

最新文章

热门文章