rem/em/px/pt的基友关系

px

像素相对长度单位,相对于显示器屏幕分辨率而言

em

相对长度单位,根据其父元素来设置字体大小

pt

point,是印刷行业常用单位,等于1/72英寸

rem

CSS3新增的一个相对单位,是根据网页的跟元素(html)来设置字体大小

rem应用于适配

rem的特性同样适用于width和height,我们可以根据根元素的font-size值来改变元素的宽高值,由此我们应该可以联想到我们可以根据屏幕大小动态地给html设定不同的值,从而达到我们css样式中的适配效果。

rem的适配规则

1.选择基准

虽然我们所写出的页面要在不同的屏幕大小设备上运行,但是我们写页面的时候,必须要选择其中一种屏幕大小作为初始的基准,而这个基准的选择应该根据我们所拿到的视觉稿来决定,

2.rem数值计算

正常情况下rem的值默认为16px,这样在整个页面的css计算过程中太过繁琐。比如,现在有个30px宽度的元素,就得写成30/16rem。对于整个页面来说工作量还是挺大的。所以这里提供了俩种方法

  • 可以将html的font-size设置成100px

    这样设置,在写单位时直接将数值除以100在加上rem的单位就可以了。如果设计稿的字体是16px;我们就可以写成1.6rem。

    • 这里为什么不用10?

      因为google等浏览器对最小字体有限制,即最小为12px,所以设置10px会有问题。
  • 使用sass

$rem : 16x;
@function px_rem($px){
@return ($px/$rem) + rem;
}

3.动态设置html的font-size

随着屏幕大小的改变,html的font-size的值应该是基准rem*改变后的屏幕宽度 / 基准屏幕宽度

  • 利用css的media query来设置(这种是一个宽度区间内一个rem)
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
$rem : 16x;
}
  • 利用javascript来动态设置(这种方法每一个宽度点都会有一个新的rem)
document.getElementsByTagName('html')[0].style.fontSize = 基准rem*window.innerWidth / 基准屏幕宽度 + 'px';

考虑dpr

一般我们获取到的视觉稿大部分尺寸是双倍大小的,我们一般会自觉的将标注/2,但是当我们配合rem使用时,完全可以按照视觉稿上的尺寸来设置。

  • 设计给的稿子双倍的原因是iphone等高清屏手机的存在,高清屏的像素比(device pixel ratio)dpr比较大,所以显示的像素较为清晰。

  • 一般手机的dpr是1,iphone4,iphone5这种高清屏是2,iphone6s plus这种高清屏是3,可以通过js的window.devicePixelRatio获取到当前设备的dpr,所以iphone6给的视觉稿大小是(*2)750×1334了。

  • 拿到了dpr之后,我们就可以在viewport meta头里,取消让浏览器自动缩放页面,而自己去设置viewport的content

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

这样我们就直接可以使用视觉稿上的尺寸了。

点击查看示例>>

我的博客:http://bigdots.github.iohttp://www.cnblogs.com/yzg1/

如果觉得本文不错的话,帮忙点击下面的推荐哦,谢谢!

rem在响应式布局中的应用的更多相关文章

  1. 响应式布局中的CSS相对量

    一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...

  2. 响应式布局中为什么要使用em设置字体大小而不用px

    px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...

  3. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  4. rem字体响应式布局

    引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...

  5. rem+js响应式布局的设置

    直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...

  6. 响应式布局中重要的meta标签设置.适用于手机浏览器兼容性设置

    <!-- #手机浏览器兼容性设置 -->    <meta content="application/xhtml+xml;charset=UTF-8" http- ...

  7. css中响应式布局中样式的代码书写方法

    代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...

  8. 在响应式布局中,碰到图片不会自动缩放,因此需要一段js脚本

    <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchang ...

  9. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

随机推荐

  1. js获取url地址中的参数

    <script type="text/javascript"> function GetQueryString(name) { var reg = new RegExp ...

  2. C++和java多态的区别

    C++和java多态的区别 分类: Java2015-06-04 21:38 2人阅读 评论(0) 收藏 举报  转载自:http://www.cnblogs.com/plmnko/archive ...

  3. ASP.NET 路由解析

    这段时间在读园子里Artech大神的<ASP.NET MVC5框架揭秘>,慢慢地从底层了解了MVC模式的设计思路.下面是一些阅读的总结. 传统的Web Forms应用,URL指向的是具体的 ...

  4. 可视化(番外篇)——SWT总结

    本篇主要介绍如何在SWT下构建一个应用,如何安装SWT Designer并破解已进行SWT的可视化编程,Display以及Shell为何物.有何用,SWT中的常用组件.面板容器以及事件模型等. 1.可 ...

  5. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  6. WebGL实现HTML5贪吃蛇3D游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  7. linux中不小心将rpm命令卸载了,怎么恢复?

    今天在搭建mysql的集群服务时,安装mysql集群服务前,先卸载原来mysql的软件包,不小心将rpm的命令也给卸载掉了,这下惨了,什么也做不了了.在google了翻了好多个页面,甚至官网也看了,没 ...

  8. WinForm,MVC知识点

    WinForm的一些基础知识,用来回忆自己遗忘的,唤醒自己的知识. 虽然现在有MVC但是我觉得还是要学习一下WinForm的,毕竟以前也被大家用了好多年. 基础知识01 1:一个控件有很多的事件,每个 ...

  9. mysql 批量插入数据

    MySQL使用INSERT插入多条记录,应该如何操作呢?下面就为您详细介绍MySQL使用INSERT插入多条记录的实现方法,供您参考. 看到这个标题也许大家会问,这有什么好说的,调用多次INSERT语 ...

  10. Wijmo 2016年蓝图

    2015年很快就过去了,这是 Wijmo 重要的一年,尤其是对 Wijmo5.脱离传统的小部件,重新写一套 JS 控件,现在看来这个决定是正确的.用 TypeScript 写 Wijmo5,意味着我们 ...