响应式网页设计rem em设置网页字体大小自适应_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
响应式网页设计rem em设置网页字体大小自适应
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢移动端页面开发适配 rem布局原理 - 推酷
移动端页面开发适配 rem布局原理
移动端页面开发适配 rem布局原理
什么是适配，为什么要适配
我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同 ，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。
需要知道的一些概念：
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素，在这里可以理解为我们说的视觉视口的大小；
所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。
设备像素比(device pixel ratio)
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
设备像素比也是设备生产的时候设置好的，在javascript中，可以通window.devicePixelRatio获取到当前设备的dpr。
视口（viewport）
pc端视口指浏览器窗口内的内容区域，不包含工具条，滚动条.
移动浏览器中视口分为几种情况:
&metaname=&viewport&content=“width=device-width,minimum-scale=1.0,maximum-scale=1.0”/&中content所设置的视口，称为布局视口，最大值由浏览器厂商规定 ,可以document.documentElement.clientWidth获取其宽度.
而我们看到的浏览器的窗口，网页区域的大小，称为视觉视口，用css像素表示（设备逻辑像素）
rem是css3 的一个长度单位 ，相对文档跟元素 html；比如设置html font-size=100那么1rem=100之后的所有元素都可以用这个基准值来设置大小；
常用的方案：
固定高度，宽度自适应（百分比，em）
使用 rem布局
下面总结了网易 淘宝首页使用rem的方案
网易的做法：
1) 将布局适口设置为视觉适口，不进行缩放，即理想适口。
&meta name=&viewport&content=&initial-scale=1,maximum-scale=1, minimum-scale=1”&
2) 以设计稿分辨率为基准，取100px为font-size的参照，那么body元素的宽度就可以设置为width:6.4rem（640/100），当我们将布局视口设置为320时，于是html的
font-size=deviceWidth / 6.4。
3) 通过document.documentElement.clientWidth获取
deviceWidth；
4) 当页面的dom ready后设置html font-size,
document.documentElement.style.fontSize =document.documentElement.clientWidth / 6.4 + ‘px’
mediaQuery
设置字体大小，字体大小不可以使用rem,原因是误差太大。
以640的设计稿为例最终的设置html font-size代码如下，布局时拿设计稿标注的尺寸除以100，就是rem的值，相当简单啊
var deviceWidth = document.documentElement.clientW
if(deviceWidth & 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
这里if(deviceWidth & 640) deviceWidth = 640; 是因为当deviceWidth大于640时物理分辨率已经大于1280（取决于
），应该去访问pc的网站；
淘宝的做法：
1) 通过dpr设置缩放比，实现布局视口大小，
var scale = 1 / devicePixelR
document.querySelector('meta[name=&viewport&]').setAttribute('content','initial-scale='+ scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
2) 动态计算html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px’；
这里的意思是，clientWidth / 10 得到是布局视口下的rem基准值（以iphone6为例 1rem＝75px），那么设计稿正好也是 750，所以对应的关系 clientWidth / 10＝＝设计稿的尺寸/x, 那么x=设计稿的尺寸/rem基准值。
如果是iphone6 plus rem基准值等于clientWidth / 10 等于124.2，那么x＝750/124.2。
关于具体的实现 淘宝提供了一个开源的方案lib-flexible：
具体逻辑 ：
1）判断head中是否设置了viewport，如果有设置，按照已有viewport 设置缩放比；
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
2）如果没有设置meta viewport，判断是否设置dpr，如果有，通过dpr计算缩放scale。
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);//maximum 设置最大值，与initial的值比较，取最小值；
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
3）如果 dpr &scale都没有设置，那么就通过设备的dpr设置起缩放 scale，
if (!dpr && !scale) {//meta[name=&viewport&]&&meta[name=&flexible&]都不存在。
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelR
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio &= 3 && (!dpr || dpr &= 3)) {
} else if (devicePixelRatio &= 2 && (!dpr || dpr &= 2)){
// 其他设备下，仍旧使用1倍的方案
scale = 1 /
4）得到scale之后 ，如果meta 的viewport不存在，那么就创建一个meta[name=“viewport”],将scale配置进去。
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
5）动态改写html的font-size
var width = docEl.getBoundingClientRect().//获取html的宽度
if (width / dpr & 540) {//判断屏幕逻辑像素大于540时，取540
width = 540 *
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem =
使用rem布局，实质都是通过动态改写html的font-size基准值，来实现不同设备下的良好统一适配；
网易与淘宝不同 的地方是 ，网易将布局视口设置成了 视觉视口，淘宝将布局视口设置成了物理像素大小，通过 scale缩放嵌入了 视觉视口中；
容器元素的字体大小都不使用rem，需要额外的media查询；
参考文章链接：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致@media screen and (min-width:320px) { html{ font-size:16}}@media screen and (min-width:360px) { html{ font-size:18}}@media screen and (min-width:375px) { html{ font-size:18.75}}@media screen and (min-width:390px) { html{ font-size:19.6}}@media screen and (min-width:400px) { html{ font-size:20}}@media screen and
(min-width:440px) { html{ font-size:22}}@media screen and (min-width:480px) { html{ font-size:24}}@media screen and
(min-width:640px) { html{ font-size:32}}@media screen and (min-width:720px) { html{ font-size:36}}以iphone4的大小开发320px,font-size:16,以1rem=16px计算，320px宽的屏扑满需要20rem,屏幕大小不同，但是铺满屏宽都是20rem,只是基准字体大小不一样
已被提问者采纳
你还没有登录，请先登录或注册慕课网帐号
字体用rem单位，样式可以用媒体查询
你还没有登录，请先登录或注册慕课网帐号
bootstracp里面有，可以用媒体查询
你还没有登录，请先登录或注册慕课网帐号
20752人关注
55370人关注
50678人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2}