响应式网页与媒体查询

什么是响应式网页

• 同一个网页在不同的设备上显示的形式不太一样，称为响应式网页(比如有些网页在pc、pad、手机上，显示布局、样式不一样)
• 响应式网页需要获取当前浏览器的宽度，可以通过JavaScript(当前未学)或者通过CSS3中新增的媒体查询技术

媒体查询

什么是媒体查询

• 获取到当前浏览器的宽度，根据不同的宽度设置元素不同的样式
• 由于媒体查询需要根据不同的浏览器宽度调整元素的样式, 所以不适合用于比较复杂的网页(如果复杂的网页做响应式，需要调整的元素样式特别多，所以一般复杂的网页不会做响应式)

媒体查询格式

media可以理解为英文中的if，@media 条件{}的含义：如果条件满足，那么就执行后面{}中的代码

• 内联格式

@media 条件{}

• 外链格式

 <link rel="stylesheet" href="css/xxx.css" media="条件">

注意点

• 在企业开发中，如果需要分别给电脑/平板/手机分别设置样式，那么我们会将按照电脑的样式-->平板的样式-->手机的样式这个顺序来写
• 在企业开发中，媒体查询中指定的宽度不是固定的，指定宽度是根据自己企业的需要来指定，并没有一个固定的值代表电脑，也没有一个固定的值代表平板，也没有一个固定的值代表手机

响应式网页编写步骤

1. 编写电脑版本的网页
2. 编写平板版本的网页，通过相同的选择器覆盖掉不同的样式
3. 编写手机版本的网页，通过相同的选择器覆盖掉不同的样式

注意点

• 如果给电脑的CSS添加条件，那么在平板和手机上所有的样式都会失效，那么如果平板和手机上有和电脑相同的样式也不能复用

• 所以我们不要给电脑的CSS添加条件，这样无论浏览器的宽度是多少，电脑的CSS文件都会被执行，我们只需要在平板或者手机对应的CSS文件中通过相同的选择器覆盖掉不同的样式即可，这样降低了代码的冗余

• 如果有不能替换的内容，可以先添加需要的内容，然后在电脑的CSS文件通过display:none将其隐藏，然后在平板或者手机的CSS文件中，通过display:none隐藏对应的电脑的内容，通过display:block显示刚刚添加的需要的内容

• 如果有需要覆盖的元素，通过开发者工具找到需要覆盖的元素，直接拷贝对应的选择器，复制到CSS文件进行修改，不要直接在CSS文件中自己写选择器