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. P1452 Beauty Contes（旋转卡壳版）

    题目背景 此处省略1W字^ ^ 题目描述 贝茜在牛的选美比赛中赢得了冠军”牛世界小姐”.因此,贝西会参观N(2 < = N < = 50000)个农场来传播善意.世界将被表示成一个二维平面 ...

  2. 织梦CMS调用文章第一张图片（非缩略图）终极方法

    之前,网上流传了很多在织梦CMS中调用第一张图片的方法,但大体都一样.即删除缩略图字符串,并添加后缀.然而这种方法仅限于jpg图片或其他单独图片类的调用.如果一个站有png.JPG.gif等多种格式. ...

  3. UVa 10305 Ordering Tasks【拓扑排序】

    题意:给出n件事情,m个二元组关系,求它们的拓扑序列 用的队列来做 #include<iostream> #include<cstdio> #include<cstrin ...

  4. nginx设置可以默认访问index.php

    vim /usr/local/nginx/conf/nginx.conf:      在 location /{                index index.php index.html i ...

  5. zabbix2.4.5安装zatree插件

    一.关于zatree zatree 是来自国内58公司开发的监控软件zabbix的一个插件,主要功能是提供host group的树形展示和在item里指定关键字查询及数据排序. 项目地址:https: ...

  6. 05-数据类型转换（bool转换）

    05-数据类型转换(bool转换)

  7. qt 闰年

    bool QDate::isLeapYear ( int year ) [static]

  8. 利用opencv源代码和vs编程序训练分类器haartraining.cpp

    如需转载请注明本博网址:http://blog.csdn.net/ding977921830/article/details/47733363. 一  训练框架 训练人脸检測分类器须要三个步骤: (1 ...

  9. thinkphp5项目--企业单车网站（七）

    thinkphp5项目--企业单车网站(七) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...

  10. HDU 1512 左偏树+并查集

    思路: 左偏树里面掺了一些并查集的应用 这里放一份左偏树的代码模板 重点就是merge函数了-- int merge(int k1,int k2){ if(!k1||!k2)return k1+k2; ...