为什么使用 rem 布局？

采用 rem 布局，可以让屏幕发生变化时，元素的高度和宽度以及文字大小等能够等比例缩放
父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的控制整个页面的元素大小

媒体查询

为什么使用媒体查询？

媒体查询可以在不同大小的屏幕中渲染当前页面时，动态的根据当前屏幕初始化 html 的 font-size 的值

媒体查询语法

@media mediatype and|not|only (media feature) { CSS-Code;
}

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

关键字(逻辑操作符)

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

and：可以将多个媒体特性连接到一起，相当于“且”的意思

@media screen and (min-width:600px) and (max-width:900px){ body{background-color: red; }
}

not：排除某个媒体类型，相当于“非”的意思，可以省略
only：指定某个特定的媒体类型，可以省略
,：表示或者的意思

@media screen and (min-width:900px),(max-width:600px){ body{background-color: red; }
}

媒体特性

值	解释说明
width	用于所有设备
min-width	用于打印机和打印预览
max-width	用于电脑屏幕，平板电脑，智能手机等

媒体查询书写规则

前面的设置不能包含在后面的媒体查询中，否则就会失效

前端rem布局知识总结相关推荐

html前端 rem布局，完美兼容各手机端的尺寸，自适应布局
1. 先下载一个淘宝的js(http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js) 用法说明: 我这里用的scss,当然没用这些样式预处 ...
flex 左右布局_面试必考点：前端布局知识
前端的页面布局知识是初中级前端工程师必须掌握的内容,在面试的时候无论大厂小厂都有很大概率被提问到,作为与页面最紧密的前端开发者,前端布局知识是必不可少的一环. 前言这里所要介绍的布局知识主要是在解决 ...
vue怎么vw布局好用_Vue 实现 rem 布局或vw 布局的方法_晴枙_前端开发者
一.实现 rem 布局移动端 name="viewport" content="width=device-width, initial-scale=1, maximum ...
antd option宽度自适应_前端基础：自适应布局之rem布局基础
Wowoy:https://juejin.im/post/5de72b1f51882512360d3910 开启一个移动端项目的基础,首先是想好如何在代码中实现移动端适配.之前没有经验,第一个项目里简 ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
（淘宝无限适配）手机端rem布局详解（转载非原创）
从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
手机端rem布局详解（淘宝无限适配）
这是淘宝的github网址,里面有适配所需的js还有说明文档地址:https://github.com/amfe/lib-flexible 1. 问题的引出最近阅读白树的博文<移动web资源 ...
（淘宝无限适配）移动手机端rem布局详解（转载非原创）
https://www.cnblogs.com/well-nice/p/5509589.html (淘宝无限适配)手机端rem布局详解(转载非原创) 从网易与淘宝的font-size思考前端设计稿与工 ...
（淘宝无限适配）手机端rem布局详解
从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
（淘宝无限适配）手机端rem布局
从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

前端rem布局知识总结

前端rem布局知识总结

为什么使用 rem 布局？

媒体查询

为什么使用媒体查询？

媒体查询语法

mediatype 查询类型

关键字(逻辑操作符)

媒体特性

媒体查询书写规则

前端rem布局知识总结相关推荐

最新文章

热门文章