Bootstrap案例1

最新推荐文章于 2023-06-25 16:31:42 发布

咸鱼-咸鱼-咸鱼

最新推荐文章于 2023-06-25 16:31:42 发布

阅读量217

点赞数

本文链接：https://blog.csdn.net/qazwsx_edc1/article/details/81167419

版权

html文件 my_mediaQuery.html

<!doctype html>
<html>
<head>
    <title>网页</title>
    <meta charset="utf-8">
    <style></style>
    <link rel="stylesheet" href="my_mediaQuery.css">
</head>
<body>
     <div class="box">
       <h1>根据浏览器屏幕尺寸的不同，加载不同css文件</h1>
       <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel officia eligendi fugit vero eum molestias reiciendis distinctio veniam maxime aut voluptatum numquam recusandae voluptate at debitis labore corrupti deleniti cumque.</span><span>Odio atque mollitia saepe quam illum fugit impedit illo hic dolor. Saepe magni eos labore nihil dolorum sunt ea fugit molestiae excepturi debitis sed soluta ducimus iure eveniet quae atque.</span></p>
     </div>
</body>
</html>

css文件 my_mediaQuery.css

body{
font:16px "microsoft yahei";
padding:0;
margin:0;
color:#fff;
}
/*pc>992px*/
@media screen and (min-width:992px){
.box{
background:blue;
font-size:24px;
}
}
/*768px<pad<991px*/
@media screen and (min-width:768px) and (max-width:991px){
.box{
background:red;
font-size:16px;
}
}
/*phone<767px*/
@media screen and (max-width:767px){
.box{
background:black;
font-size:12px;
}
}