css3-Media Query根据设备调整css

半兽人 发表于: 2018-09-15   最后更新时间: 2020-08-11  

在css3中,可根据屏幕设置css样式,2种方式。

  1. 引入不同的css文件
<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:680px)">
  1. 根据设备大小,选择css
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- 第一种写法,文件形式 -->
    <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:680px)">
    <style type="text/css">
        /* 标签形式 */
        @media screen and (min-width: 680px){
            body{background: blue;}
        }
    </style>
</head>
<body>
...
</body>
</html>

在线运行



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: 到头了!
下一条: CSS3 :not 选择器