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 优点 就是可以 ...
随机推荐
- python ftp
#fpt_server.py#__*__ encoding=utf-8 __*__ import socket ,os class MyClass(object): def __init__(self ...
- Chrome插件开发笔记
使用 XMLHttpRequest来抓取盗版小说网站里面的内容,但是注意需要在manifest.json文件中设置permission var xhr = new XMLHttpRequest();x ...
- inceptionnet
inception发展历程 v1 mlp多层感知器层 上面两个观看孔径,尺寸不一样,可以抽取不同分辨率,不同尺度的邻域范围的信息作为特征,这样就可以观察到输入数据的不同层次,不同分辨率的特征 因为这个 ...
- [笔记-统计学习方法]感知机模型(perceptron) 原理与实现
前几天认把感知机这一章读完了,顺带做了点笔记 现在把笔记做第三次的整理 (不得不说博客园的LaTex公式和markdown排版真的不太舒服,该考虑在服务器上建一个博客了) 零.总结 适用于具有线性可分 ...
- 洛谷P2196 && caioj 1415 动态规划6:挖地雷
没看出来动规怎么做,看到n <= 20,直接一波暴搜,过了. #include<cstdio> #include<cstring> #include<algorit ...
- 题解 P2330 【[SCOI2005]繁忙的都市】
又是一道Kruskal题目. AC代码见下. 主要思路就是将所有的边储存起来,然后进行贪心地选择,期间需要判断两个端点是否有关联,这一过程通过并查集实现.Kruskal部分套模板就可以了. #incl ...
- flash3D学习1
今天正式学习flash3D. 先配置: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0 ...
- iOS多线程与网络开发之多线程GCD
郝萌主倾心贡献,尊重作者的劳动成果.请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠.支持郝萌主.捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...
- legend---二、如何降低编程复杂度
legend---二.如何降低编程复杂度 一.总结 一句话总结:配置文件,数据库 个性的东西可以一起写入数据库,那么编程复杂度会大幅降低,页面灵活度也大幅降低(特有属性写进数据库) 比如不同难度的颜色 ...
- 125.C++输入小结
#include <iostream> #include <iomanip> #include <cstring> #include <cstdlib> ...