css3 @media查询

定义

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

举个栗子:

@media screen and (max-width: 300px) {

body {

 background-color:lightblue;

    }

}

------------意思为如果文档宽度小于 300 像素则修改背景颜色(background-color):为 lightblue

demo：

1、首先我先在电脑上打开网页

2.F12，查看手机模式，默认iponeX

是不是很不舒服

3.我们需要进行网页自适应的调试

第一步，在head添加

添加之后刷新页面就会变成下面这样

这是pc的

手机是这样

大家可以看到，右边有一部分缺失，需要向左滑动才行。这是肯定不行的，咱们的最终目标是将这个登录页面显示在手机的中心。

！！！！最重要的一步来了

通过#media修改css样式，但是有不能影响pc端的样式，就需要用到 @media（媒体查询）

意思为当页面在375到812之间时修改 id为 baodao元素下的img 样式为 {}

ok，咱么来看下效果

我们会发现body的css样式不见了，这就涉及到css中优先级的问题

html引用css三种方法

外部样式：通过link标签引入CSS样式；

内页样式：写在HTML页面里面的style标签里面；

行内样式：写在对应标签的style属性里面。

权重----行内样式>内页样式>外部样式

也就是说

<style type="text/css"> 优先级小 <style>

<p style=" 优先级大"></p>

写自适应尤其用原来的代码写自适应，一定尽可能不要动原来写的东西。这时候，咱们只需要通过添加！important 就可以使其优先级最高。

看下效果

样式就全回来了