详解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 相关文章推荐
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[05:05]第三天的dota2
2013/07/29 DOTA
Python字符串替换实例分析
2015/05/11 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python调用.NET库的方法步骤
2019/12/27 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
犯错检讨书
2014/02/21 职场文书
求职个人评价范文
2014/04/09 职场文书
通信工程专业求职信
2014/06/04 职场文书
庆六一开幕词
2015/01/29 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS