媒体查询
- 创建一个服务器
永远不要用file协议。
npm i -g http-server
之后在文件夹下运行http-server -c-1 - 电脑、纸张、都是媒体，媒体查询就是对你的媒体进行条件的查询。
例子： 如果某个媒体宽度在0-800之间，就应用body样式。满足条件就生效，不满足条件就不生效。
media的语法：
@media (max-width: 800px){
body {
background: red;
}
}
代码示例：
<style>
@media (max-width: 768px){
body {
background: blue;
}
}
@media (max-width: 425px){
body {
background: green;
}
}
@media (max-width: 375px){
body {
background: yellow;
}
}
@media (max-width: 320px){
body {
background: red;
}
}
@media (min-width: 769px){
body {
background: purple;
}
}
</style>
第二种写法
@media (max-width: 320px){
body {
background: red;
}
}
@media(min-width: 321px) and (max-width: 375px){
body {
background: orange;
}
}
@media (min-width: 376px) and (max-width: 425px){
body {
background: green;
}
}
@media (min-width: 426px) and (max-width: 768px){
body {
background: blue;
}
}
@media (min-width: 769px){
body {
background: purple;
}
}
media和CSS的关系：
- 媒体查询结果可以用CSS文件代替具体内容。
设配只有在满足最大宽度小于320px才会生效。（css始终会下载，当达到要求会生效）
<link rel = "stylesheet" href = "style.css" media = "(max-width:320px)"> -
link标签是否生效是受media媒体查询条件影响的。 - 需要添加多个CSS来满足不同屏幕的宽度。
- 能随着你动的页面就是响应式页面。
-
media是不影响性能的，页面中有多个media是没关系的。同时还要关注选择器的优先级。
隐藏元素：
dispaly :none ;隐藏
dispaly: block ;解除隐藏
- 导航隐藏与自适应：
- 先做手机页面（
mobile first）推荐，因为用户多。 - 先做PC页面（
desktop first）。
- 用了
display:flex;justify-content:center / space-between就不需要用浮动了。 - 一种页面的两种状态，用JS做，两个页面的不同状态，用媒体查询。
-
www.smashingmagazine.com是响应式布局。
代码示例：
主要方案：
- 现在不推荐使用响应式。
- 根据不同的
useragent返回不同的html 和css。 - 产生不同的网址，手机和PC完全两个代码。
移动端特点：
- 手机上的布局主要：
flex。 - 手机上没有
hover. - 有
touch事件。 - 没有
resize。（窗口大小改变时发生的事件） - 没有滚动条。
- 所有的框架都会封装一个通过
touch事件模拟滑动事件，JS原生不支持。
例题：
TIM图片20181226163558.png
meta viewport
<meta name = "viewport" content = "width = device-width,user-scalable = no, inital-scale = 1，maximum-scale = 1 minium-scal = 1">
告诉浏览器，在展示页面的时候，不要把980Px当宽度，手机设备的宽度就是真实的宽度，不要进行缩放。快捷键：meta:vp 之后按tab键
补充说明：
- 响应式不实用，淘宝，京东等都不是响应式，是不同的网址。后端来做的，把手机端页面和电脑页面分开来。
- 只有一些简单的页面才做响应式。
- 根据不同的
user agent返回不同的HTML。 - 页面缩放的原因：一开始的时候，手机屏幕300度像素，而电脑屏幕900像素，所以需要缩放。
- 用手机开任何一个网站都是缩放的。缩放比例：摸拟980px 。
document.documentElement.clientWidth获取页面宽度。 - 用js获取手机屏幕像素，会得到980px，原因：用手机屏幕去模拟浏览器屏幕，进行缩放。
-
meta:vp tab键就可以了。
