当前位置:首页 > 大杂烩 > 正文内容

@media的用法

xiurr2年前 (2023-02-04)大杂烩878

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

注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=767的设备 }

另一种是直接在link中判断设备的尺寸,然后引用不同的css文件:

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

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

在media属性里:
screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
(min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。

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

常用的:
小于768的
768px
768和992之间的
992px
992和1200间的
1200px
大于1200

bootstrap的断点值:
Bootstrap 是移动设备优先的

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: 768px) { … col-sm-3… }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: 992px) { … col-md-3…}

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: 1200px) { … col-lg-3…}

总结:顺序不能反
@media (max-width: 767px) { … col-xs-3… } { //<=767的设备 } 手机
@media (min-width: 768px) { … col-sm-3… } { //>=768的设备 } 平板
@media (min-width: 992px) { … col-md-3…} { //>=992的设备 } 电脑
@media (min-width: 1200px) { … col-lg-3…} { //>=1200的设备 } 大显示器

扫描二维码推送至手机访问。

版权声明:本文由xiurr发布,如需转载请注明出处。

本文链接:https://xiurr.com/post/20.html

分享给朋友:
返回列表

上一篇:完整示例

没有最新的文章了...

相关文章

利用wget快速扒站

利用wget快速扒站

在Linux下,通过一个命令就可以把整个站相关的文件全部下载下来。wget -r -p -k -np参数说明:-r : 递归下载-p : 下载所有用于显示 HTML 页面的图片之类的元素-k : 在转...

执行vue ui没反应

执行vue ui没反应

执行vue ui没反应 用 vue -h 查看时发现没有ui功能 原因:vue版本太低vue版本低于3时没有ui功能 查看版本号vue -V 查看是否有ui功能vue -h 解决办法 卸载老版本npm uninsta...

docker启动时 WARNING: IPv4 forwarding is disabled. Networking will not work.

详细问题使用docker启动一个镜像服务时报出 WARNING: IPv4 forwarding is disabled. Networking will not work.,此时该镜像服务无法进行联网解决方法# 1. ...

完整示例

完整示例

Editor.md 目录 (Table of Contents) [TOCM][TOC]Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6Heading 1 lin...