可以把它想象成：hover，：hover是当鼠标经过时会发生对应的变化，而媒体查询当屏幕宽度的变化到一定程度时才发生对应的变化。
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
在我们的移动端的网页设计中，要求很高，1像素的差别就影响我们的整个页面的设计美感。所以，我们需要设配不同的手机屏幕的像素密度的页面，这样，我们就要用到viewport方法。viewport方法就是帮助我们来适配不同手机的屏幕像素密度页面。为了保证我们设计的尺寸不是真，一般会在平米密度可选择性较多的移动设备中，使用viewport技术。这是，我们viewport方法就是帮助我们的来适配不同密度的手机屏幕像素密度。这样，我们可以更好的体现我们的页面的设计美感。
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no">实现响应式的方式
Media Query早在CSS2的时候就出现,
@media screen and (max-width:1024px) and (min-width:300px){div{color:red;}
}
可以将Media Query看成“Meida Type（判断条件） + CSS（符合条件的样式规则）”,上面代码是屏幕像素在300px-1024px下div的颜色为红色；
css3 vh
vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>hanggecom</title>
<style>
html, body, div, span, h1, h2, h3 {
margin: 0;
padding: 0;
border: 0;
}
demo {
width: 100vw;
font-size: 5vw;
margin: 0 auto;
background-color: #50688B;
color: #FFF;
}
demo2 {
width: 80vw;
font-size: 5vw;
margin: 0 auto;
background-color: #ff6a00;
}
demo3 {
width: 50vw;
height: 50vh;
font-size: 1vw;
margin: 0 auto;
background-color: #ff006e;
color: #FFF;
}
</style>
</head>
<body>
<div class="demo">
<h1>宽度100％, 字体5％</h1>
</div>
<div class="demo2">
<h2>宽度80％, 字体5％</h2>
</div>
<div class="demo3">
<h3>宽度50％, 高度50％, 字体1％</h3>
</div>
</body>
</html>响应式布局，说穿了就是用css写了好几套的样式，当屏幕大小不同的时候，读取不同的样式而已。例如：
@media screen and (max-width: 300px) {
body {
background-color:red;
}
}
和
@media screen and (min-width: 700px) {
body {
background-color:lightblue;
}
}
这两个的意思，就是当屏幕最大宽度是300的时候，body的背景是红色；当屏幕最小宽度是700的时候，body的背景是淡蓝色。在@media这个大括号中，你只要按照平常的css一样写就行了rem是什么？
px，绝对长度单位，最常用
em，相对长度单位，相对于父元素，不常用
rem，相对长度单位，相对于根元素，常用于响应式布局
响应式布局的常用方案
media-query,根据不同屏幕宽度设置根元素font-size
rem,基于根元素的相对单位
rem的弊端：“阶梯性”
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）