媒体查询
媒体查询 Media Queries，是一种可以根据不同的设备为其实现不同的样式的技术。在CSS3 引入了媒体查询，使用媒体查询，你可以针对不同的媒体类型定义不同的样式，还可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，媒体查询是非常有用的。- 可能有一组用于屏幕的样式规则、一组用于打印机的样式规则、一组用于手持设备的样式规则，甚至还有一组用于电视，等等。通过媒体查询你可以针对这些不同的设备设置不同的样式。
- 可能在同一类型的设备上，当浏览器的窗口大小不同时，你可以在不同的尺寸下设置不同的样式，实现响应式布局。
媒体查询可以用于检测很多东西：
- 自动检测 viewpoint（视口）的宽度和高度
- 自动检测设备的宽度和高度
- 旋转方向（智能手机横屏或竖屏）
- 分辨率大小
使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机等（例如 iPhone 和 Android 手机）提供定制的样式表，并且它支持过渡效果。
语法
@media mediatype and|not|only (media feature){
css-code;
}
参数：
- 必须是以 @media 开头
- 然后指定设备类型（媒体类型mediatype）：all（用于所有设备）；print（用于打印机和打印预览）；scree（用于电脑屏幕,平板电脑,智能手机等）
- 接着是括号()里的规定媒体特性（media feature），媒体特性的书写格式与css样式类似，都是属性名：属性值：width（定义输出设备中页面可见区域的宽度）；min-width（定义输出设备中页面最小可见区域宽度）；max-width（定义输出设备中页面最大可见区域宽度）
- 最后跟着的大括号{ css-code }，里面放置的是要设置的css样式。
引入方式：
在<style>...</style>标签里面使用@media来实现媒体查询
参考下面的标题 案例：
在<style>...</style>标签上使用media=""
案例：只有当设备宽度大于等于 300px 小于等于 500px 时运用此样式
<style media="(min-device-width: 300px) and (max-device-width: 500px)"> ... </style>
在<link>...</link>标签上使用media=""
案例：当设备宽度大于等于 300px 小于等于 500px 时运用文件 style1.css 中的样式；当设备宽度大于 500px 时运用文件 style2.css 中的样式
<link rel="stylesheet" href="./style1.css" media="(min-device-width: 300px) and (max-device-width: 500px)"/> <link rel="stylesheet" href="./style2.css" media="(min-device-width: 501px)"/>
案例：
让元素div，在屏幕宽度小于540px时，宽高为300px，背景色为红色；在屏幕宽度大于等于540px小于970px时，宽高为500px，背景色为绿色；在屏幕宽度大于970px时，宽高为900px，背景色为蓝色；
div {
border: 1px solid #000;
transition: 0.5s;
}
@media screen and (max-width: 539px) {
div {
width: 300px;
height: 300px;
background-color: red;
}
}
@media screen and (min-width: 540px) and (max-width: 969px) {
div {
width: 500px;
height: 500px;
background-color: green;
}
}
@media screen and (min-width: 970px) {
div {
width: 900px;
height: 900px;
background-color: blue;
}
}
rem布局
rem单位，是相对于根元素 <html></html> 的字体大小 进行设置，默认情况下根元素的字体大小为 16px，此时 1rem = 16px。
rem布局的本质是根据设备宽度进行缩放，一般是基于屏幕宽度，先按定宽高设计出来页面，然后转换为rem单位。可以配合 媒体查询 或 js 在不同屏幕下改变 根元素<html></html> 的字体大小，来达到整个页面的缩放。rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询。
rem与媒体查询的结合使用
我们只需使用 @media 设置不同屏幕宽度下根元素的字体大小，然后在后面元素的像素大小设置中使用 rem 单位。
html{
font-size: 50px;
}
// 将屏幕宽度划分成15个区间
@media screen and (min-width: 320px){
html{
font-size: 320px;
}
}
@media screen and (min-width: 360px){
html{
font-size: 360px;
}
}
@media screen and (min-width: 384px){
html{
font-size: 384px;
}
}
@media screen and (min-width: 400px){
html{
font-size: 400px;
}
}
@media screen and (min-width: 414px){
html{
font-size: 414px;
}
}
@media screen and (min-width: 424px){
html{
font-size: 424px;
}
}
@media screen and (min-width: 480px){
html{
font-size: 480px;
}
}
@media screen and (min-width: 540px){
html{
font-size: 540px;
}
}
@media screen and (min-width: 720px){
html{
font-size: 720px;
}
}
@media screen and (min-width: 750px){
html{
font-size: 750px;
}
}
flexible.js的使用
flexible.js 是手机淘宝团队出的简洁高效移动端适配库，我们再也不需要写不同屏幕的媒体查询，因为里面js做了处理。它的原理是把设备屏幕宽度划分成10等份，在不同屏幕宽度下，比例是一致的。我们要做的就是确定好我们当前设备的 根元素<html></html> 字体大小就可以了。
比如当前设计图是750px 那么在写样式时只需要把 html 的字体大小设置为75px （750px/10），然后在后面元素的像素大小设置中使用 rem 单位，这个时候写的样式与设计图就是等比例的。 flexible.js 会实时的计算屏幕宽度并设置根元素的字体大小，从而实现等比缩放。
下面为 flexible.js 的源代码，只需复制并在文件中引入即可使用。(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
vscode插件
标签：min,media,screen,布局,查询,width,rem,font From： https://www.cnblogs.com/qianduanLamp/p/16714515.html