bootstrap--mediaQuery简化版

最新推荐文章于 2022-04-01 20:07:56 发布

时光如沙

最新推荐文章于 2022-04-01 20:07:56 发布

阅读量372

点赞数

分类专栏： bootstrap 文章标签： media query

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

//mediaQuery.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,maximum-scale=2.0,minimum-scale=1.0,user-scalable=no,initial-scale=1.0">
    <link rel="stylesheet" href="./mediaQuery.css">
    <title>媒体查询技术</title>
  </head>
  <body>
    <h1>media</h1>
    <p>css3 media query</p>
  </body>
</html>

//mediaQuery.css

*{
  margin:0px;
  padding: 0px;
}
@media screen and (max-width:600px){
  body{
    background-color: #f00;
  }
  h1{
    font-size: 40px;
  }
  p{
    font-size: 30px;
  }
}
@media screen and (min-width:600px) and (max-width:1000px){
  body{
    background-color: #0f0;
  }
  h1{
    font-size: 30px;
  }
  p{
    font-size: 20px;
  }
}
@media screen and (min-width:1000px){
  body{
    background-color: #00f;
  }
  h1{
    font-size: 20px;
  }
  p{
    font-size: 10px;
  }
}