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)">

上面的意思是当屏幕的宽度大于等于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)">

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


另一种方式,即是直接写在

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

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


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


要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。



看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于css媒体查询 @media适配不同大小窗口的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
Echarts数据可视化series-map地图全解
2 条回复
  1. 动画制作
    动画制作
    (2019-08-30 16:17:57) 1#

    要注意的是由于网页会根据屏幕宽度调整布局

    1. 动画制作
      动画制作
      (2019-08-30 16:18:30)     

      www.dongmanzhizuo.com

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信