详解rem 适配布局


Posted in HTML / CSS onOctober 31, 2018

当今手机种类繁多 且不说iphone系列,安卓手机的种类已经数不胜数了,所以不可能每一款手机都要写一套布局样式,这也是不可能做到的,但是对于越来越精益求精的前端来说 ,当然要找到一个合理的解决方案。rem 就是用来自适应布局的。

适配要达到的效果,如下图(简单的示范一下)

详解rem 适配布局

两个div不论在大屏还是小屏上都是占据屏幕的一半

虽然上面这种简单的使用百分比可以实现但是,百分比无法实现字体的自适应,百分比转换成相应的尺寸还是很难的。接下来就说说这次我们的主角 rem (我们一般只适配宽度)

rem 原理解析

首先rem是一个相对于根元素fontSize大小的相对单位,也就是说 1rem 等于 html 的 fontSize 大小, 接下来我们只需要改变html 元素的 fontSize 就可以控制 rem 的大小。接下来我们怎么适配不同的屏幕呢,只要我们做到 屏幕宽度越大 1rem 表示的px值越大及HTML的fontSize值越大,也就是说 HTML的fontSize要于屏幕的宽度成正比。

再说一下一些概念 设备像素比设备物理像素设备独立像素 (有时也说是虚拟像素)

设备像素比 = 设备物理像素 / 设备独立像素

设备物理像素: 设备上显示的最小单位

设备独立像素: 独立于设备的用于逻辑上衡量像素的单位(css尺寸)。

就拿iphone6/7/8 做说明iphone6/7/8的物理像素是750,是设备的实际尺寸,而px是是设备独立像素单位,iphone6/7/8是2倍屏,它的css尺寸就是 375, 设备像素比是设备出厂时已经设置好的。 那么我们怎么实现适配?

这就用到最流行的rem了

rem的实现方案

首先、根据不同屏幕的设备物理像素,要跟html元素的fontSize设置不同的px大小

1、媒体查询

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

利用@media screen and (min-width:XXX)来判断设备的尺寸,进而设置html的fontSize

2、js设置html的fontSize(网易方案)

function setRem () {
        let htmlRem = document.documentElement.clientWidth
        document.documentElement.style.fontSize = htmlRem/7.5 + 'px'
      }
setRem()

以上代码是以iphone6为设计稿,结果是1rem=100px的实际像素,因为iphone6的设备像素比是2所以1rem在浏览器的预览中是50px,也就是实现了1rem和设备宽度成7.5倍的关系,设备宽度改变1rem的实际大小也会改变,而且在屏幕中的比例是没有变的。(市面上大多数是这种方案)

3、使用vw、vh

html{
    font-size: 10vw
}

vw、vh是新的一种相对单位是把可视区域分的宽高为100份类似于百分比布局,这种方案它不用去写js,不过兼容性有点差

下面附上vw、vh兼容性的表

详解rem 适配布局

每篇一省 rem是相对于根元素的fontSize,所以所有努力就是设置根元素的fontSize与设备宽度成正比

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 #HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 #HTML / CSS
canvas像素画板的实现代码
Nov 21 #HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 #HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 #HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 #HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 #HTML / CSS
You might like
用Zend Encode编写开发PHP程序
2010/02/21 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
再谈JavaScript线程
2015/07/10 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
jupyter安装小结
2016/03/13 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Python处理session的方法整理
2019/08/29 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
win10安装python3.6的常见问题
2020/07/01 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
青安岗事迹材料
2014/05/14 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
优秀员工演讲稿
2019/06/21 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
python程序的组织结构详解
2021/12/06 Python
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
MySQL 字符集 character
2022/05/04 MySQL