bootstrap--mediaQuery简化版

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

时光如沙

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

阅读量377

点赞数

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

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS3媒体查询技术实现响应式网页设计的方法。通过定义不同屏幕尺寸下的样式规则，确保网页能在各种设备上良好显示。具体包括：当屏幕宽度小于等于600px时，背景色为红色；当屏幕宽度介于600px到1000px之间时，背景色为绿色；当屏幕宽度大于1000px时，背景色为蓝色。此外，还根据不同屏幕尺寸调整了标题和段落文字大小。

//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;
  }
}