html --- rem 媒体查询
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 媒体查询的更多相关文章
- 【译】PX、EM还是REM媒体查询？
原文链接:https://zellwk.com/blog/media-query-units/ 你有没有想过使用媒体查询的时候到底该用px.em还是rem作单位呢?我曾经也有同样的疑问,而且我到现在也 ...
- rem媒体查询
@media only screen and (min-width: 1080px), only screen and (min-device-width:1080px) { html,body { ...
- Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询
实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...
- 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....
一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 从设计图到CSS：rem+viewport+媒体查询+Sass
根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总结一下其中要点. rem rem是一种相对长度单位,参考的基准是<html>标签定义的 ...
- 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...
- rem适配布局（rem+less+媒体查询 和 rem+flexible.js）
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
随机推荐
- OpenGL编程逐步深入（六）平移变换
准备知识 从这一节我们开始接触3D对象各种各样的变换,使其显示在屏幕上看起来有深度的感觉.通常每一种变换都是通过矩阵来实现的,把这些变换矩阵逐个的乘起来,然后用乘积乘以顶点位置.在每个教程中,我们致力 ...
- Android开发日志统一管理
在开发中,我们通常要对日志的输出做统一管理,下面就为大家推荐一个日志输出类,在开发阶段只需将DEBUG常量设为true,生产环境将DEBUG设为false即可控制日志的输出.啥都不说了,需要的朋友直接 ...
- k近邻法(k-nearest neighbor, k-NN)
一种基本分类与回归方法 工作原理是:1.训练样本集+对应标签 2.输入没有标签的新数据,将新的数据的每个特征与样本集中数据对应的特征进行比较,然后算法提取样本最相似数据(最近邻)的分类标签. 3.一般 ...
- python调用java--JPype
JPype 是一个能够让 python 代码方便地调用 Java 代码的工具,从而克服了 python 在某些领域(如服务器端编程)中的不足.JPype 的使用一个简单的 hello world 程序 ...
- react 中间件相关的一些源码解析
零.随便说说中间件 在react的使用中,我们可以将数据放到redux,甚至将一些数据相关的业务逻辑放到redux,这样可以简化我们组件,也更方便组件抽离.封装.复用,只是redux不能很好的处理异步 ...
- [笔记-图论]Bellman-Ford
用于求可带负权的单源有向图 优化后复杂度O(nm) 如果图中存在负环,就不存在最小路 这种情况下,就一定会有一个顶点被松弛多于n-1次,Bellman-Ford可直接判断出来 我在网上看到SPFA,发 ...
- Linux服务器性能评估与优化
一.影响务器性能因素 影响企业生产环境Linux服务器性能的因素有很多,一般分为两大类,分别为操作系统层级和应用程序级别.如下为各级别影响性能的具体项及性能评估的标准: (1)操作系统级别 内存: C ...
- request.getxxxxxx()的使用方法
request.getSchema() 可以返回当前页面使用的协议,http 或是 https; request.getServerName() 可以返回当前页面所在的服务器的名字; request. ...
- Intel投入5亿美元提升14nm工艺CPU需求
虽然14nm行将收尾,但是却有大量的客户在赶“末班车”,导致CPU供货告急. Intel年初宣布增加10亿美元的额外资本支出用于转向更新的.更先进的生产工具,以便增加产能,在本周的第39届纳斯达克投资 ...
- gcc 生成动态链接库
http://blog.csdn.net/ngvjai/article/details/8520840 Linux下文件的类型是不依赖于其后缀名的,但一般来讲: .o,是目标文件,相当于windows ...