css3-Media Query根据设备调整css

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

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


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




上一条: 实现漂亮的超链接
下一条: SSL与TLS的区别