css media区间宽带显示,css媒体查询 @media适配不一样大小窗口

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

CSS3 @media是什么，功能呢？

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

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

CSS3 @media的两种工做方式：

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

1

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

在media属性里：.net

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

1

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

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

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

.class { background:#ccc; } }

1

2

3

4

5

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

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

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