rem是一种相对长度单位,参考的基准是<html>标签定义的font-size

viewport

做移动端的h5,通常会在HTML文件中指定一个<meta>标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">

媒体查询

手机屏幕的分辨率越来越高,比如iPhone 5为640*1136 px、iPhone 6/6S为750*1334 px。我拿到的UI图,其参考分辨率为1440*2560 px

  而在写CSS时,通常是以屏幕宽度为参考的。打开Chrome的响应式设计工具,就可以看到各种设备的屏幕宽度,比如iPhone 5的屏幕宽度是320*568 px,iPhone 6/6S的屏幕宽度为375*667 px。分辨率和屏幕宽度之间,是有一个倍屏系数换算的。

  设计师给了一张宽为1440px的UI图,而做不同设备的适配,就是前端工程师的职责了。

比如UI图上标注了某个段落的字体大小为64px。为了保证在各种屏幕上的不失真,就要根据实际屏幕宽度做等比例换算,才能写进CSS,即满足:

写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度

因此:

写入CSS的尺寸 = UI图标注的尺寸/UI图宽度*屏幕宽度
比如上例,当标注尺寸为64px、UI图宽度为1440px时,针对不同屏幕宽度,写入CSS的属性分别为:

屏幕宽度320px:font-size: 64/1440*320 = 14.22px
屏幕宽度360px:font-size: 64/1440*360 = 16px
屏幕宽度375px:font-size: 64/1440*375 = 16.67px
...
屏幕宽度1440px:font-size: 64/1440*1440 = 64px

  在<html>标签上只做一次媒体查询,而在p.intro上使用rem单位。

// 对html做媒体查询,定义基准的font-size
@media (min-width: 320px) {
html {
font-size: 14.22px;
}
}
@media (min-width: 360px) {
html {
font-size: 16px;
}
} @media (min-width: 375px) {
html {
font-size: 16.67px;
}
} @media (min-width: 1440px) {
html {
font-size: 64px;
}
} // CSS单位使用rem
p.intro {
font-size: 1rem;
}

html --- rem 媒体查询的更多相关文章

  1. 【译】PX、EM还是REM媒体查询?

    原文链接:https://zellwk.com/blog/media-query-units/ 你有没有想过使用媒体查询的时候到底该用px.em还是rem作单位呢?我曾经也有同样的疑问,而且我到现在也 ...

  2. rem媒体查询

    @media only screen and (min-width: 1080px), only screen and (min-device-width:1080px) { html,body { ...

  3. Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询

    实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...

  4. 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....

    一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...

  5. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  6. 从设计图到CSS:rem+viewport+媒体查询+Sass

    根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总结一下其中要点. rem rem是一种相对长度单位,参考的基准是<html>标签定义的 ...

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

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

  8. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  9. rem适配布局(rem+less+媒体查询 和 rem+flexible.js)

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

随机推荐

  1. c# static 常量

    1 关键字 static 修饰 类  字段 属性 方法 ,标记static的就不用创建类的实例调用了,直接通过类名点出来 2 用于变量前,表示每次重新使用该变量所在的方法,类或者自定义的类时,变量的值 ...

  2. caffe(1) 网络结构层参数详解

    prototxt文件是caffe的配置文件,用于保存CNN的网络结构和配置信息.prototxt文件有三种,分别是deploy.prototxt,train_val.prototxt和solver.p ...

  3. [洛谷P2245]星际导航

    题目大意:有一张n点m边的带权无向图,和一些问题,每次询问两个点之间的路径的最大边权最小是多少. 解题思路:同NOIP2013货车运输,只是数据增大,大变成小,小变成大了而已.所以具体思路见货车运输. ...

  4. 推荐《R数据可视化手册》高清英文版PDF+中文版PDF+源代码

    绝大多数的绘图案例都是以强大.灵活制图而著称的R包ggplot2实现的,充分展现了ggplot2生动.翔实的一面.从如何画点图.线图.柱状图,到如何添加注解.修改坐标轴和图例,再到分面的使用和颜色的选 ...

  5. 紫书 习题 10-14 UVa 10886(暴力+数据范围)

    开始的时候一看这题感觉很难,觉得肯定有什么很快的办法 不能暴力做(受了上一题10-13的影响) 然后一看那个函数感觉无从下手. 然后看了博客发现,原来这道题就是直接暴力-- 因为n的范围为10的7次方 ...

  6. [NOIP1999]进制位(搜索)

    P1013 进制位 题目描述 著名科学家卢斯为了检查学生对进位制的理解,他给出了如下的一张加法表,表中的字母代表数字. 例如: + L K V E L L K V E K K V E KL V V E ...

  7. JAVA JS 中的 modulus exponent 生成 C# 公匙

    C#用的是xml,里面是base64编码的.你上面的就是hex格式,只要把上面hex格式转成byte数组,然后在base64编码就可以了. public static byte[] Hex2Byte( ...

  8. WebKit载入流程 - 概述

    之前写了几篇载入流程的说明,是从下向上看,有点仅仅见树木不见森林的感觉.经过近期一段时间的学习,有了能加以概括抽象的方法. WebKit载入流程和页面组成是直接相关的,页面就是WebKit要载入的对象 ...

  9. hdoj-1164-Eddy&#39;s research I【分解质因数】

    Eddy's research I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...

  10. .Net 跳转

    Action正常跳转 <a href="@Url.Action("AppDownload")">点击下载APP</a> public A ...