css3-Media Query根据设备调整css

半兽人 发表于: 2018-09-15   最后更新时间: 2020-08-11 20:56:31  
{{totalSubscript}} 订阅， 2,447 游览

在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>

在线运行

css
更新于 2020-08-11
半兽人
在线，1小时前登录

查看css3更多相关的文章或提一个关于css3的问题，也可以与我们一起分享文章。