css媒体查询 @media适配不一样大小窗口

版权声明：本文为博主原创文章，未经博主容许不得转载。 https://blog.csdn.net/Lockey23/article/details/75452536

 

CSS3 @media是什么，功能呢？

在响应式web设计中，CSS3 @media是一个入门级的技巧

CSS3 @media（也成为CSS3媒体查询）其做用就是容许添加表达式用以肯定媒体的环境状况，以此来应用不一样的样式表。换句话说，其容许咱们在不改变内容的状况下，改变页面的布局以精确适应不一样的设备。

CSS3 @media的两种工做方式：

一种是直接在link中判断设备的尺寸，而后引用不一样的css文件：

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

• 1

上面的意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

在media属性里：

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型and 被称为关键字，其余关键字还包括 not(排除某种设备)，only(限定某种设备)(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

• 1

上边的意思是当屏幕的宽度大于600小于800时，应用styleB.css

另外一种方式，便是直接写在

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ .class { background: #ccc; } }

• 1
• 2
• 3
• 4
• 5

写法是前面加@media，其它跟link里的media属性相同

其实基本上就是样式覆盖~，判断设备，而后引用不一样的样式文件覆盖。

要注意的是因为网页会根据屏幕宽度调整布局，因此不能使用绝对宽度的布局，也不能使用具备绝对宽度的元素。这一条很是重要，不然会出现横向滚动条。