媒体查询的使用

最新推荐文章于 2022-02-25 17:28:26 发布

r67686

最新推荐文章于 2022-02-25 17:28:26 发布

阅读量183

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/r67686/article/details/120515581

版权

现在正规的流行的网页，往往会有很多跨设备的用户去使用这个网页，设备的很多属性都会有不同，这里仅仅以尺寸属性来分的话，PC，平板，手机，而为了各种设备上用户的浏览使用需求，只有一套CSS样式可不行，得根据这些设备的尺寸大小来设置不同的样式，这就用到了媒体查询。

主页面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 通用的CSS -->
  <link rel="stylesheet" href="./css/common.css">
  <!-- PC端的 CSS样式  大于1024px-->
  <link rel="stylesheet" media="screen and (min-width:1024px)" href="./css/pc.css">  
  <!-- pad端的CSS样式 768px ~ 1023px -->
  <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:1023px)" href="./css/pad.css">
  <!-- mobile的CSS样式 小于768px-->
  <link rel="stylesheet" media="screen and (max-width:767px)" href="./css/mobile.css">
</head>
<body>
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

通用代码（任何设备浏览都要加上的的代码）：


*{
  margin: 0;
  padding: 0;
}
ul,ol {
  list-style: none;
}
a {
  color: #333;
  text-decoration: none;
}

当宽度大于1024px(pc端)时使用pc.css里的样式代码，使用的是流式布局

/*pc的css*/
.container {
  height: 300px;
  margin: 0 auto;
  display: flex;
}
.container div{
  flex: 0 1 25%;
  border: 10px solid aqua;
}

当宽度为768px到1024px之间时，使用pad端的样式代码，一样是流式布局，但是元素的大小有所不同

/* pad端的样式 */
.container{
  display: flex;
  flex-wrap: wrap;
}
.container>div{
  flex: 0 1 50%;
  height: 300px;
  border: 10px solid aqua;
  box-sizing: border-box;
}

当宽度小于768px时，用的就是移动端的样式代码，就是默认的每个div独占一行的模式，

/*手机端的样式*/
.container>div{
  height: 300px;
  border: 10px solid aqua;
}

看一下效果

当宽度大于1024px

当宽度在768px-1024px之间

当宽度小于768px

r67686

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
媒体查询的使用

现在正规的流行的网页，往往会有很多跨设备的用户去使用这个网页，设备的很多属性都会有不同，这里仅仅以尺寸属性来分的话，PC，平板，手机，而为了各种设备上用户的浏览使用需求，只有一套CSS样式可不行，得根据这些设备的尺寸大小来设置不同的样式，这就用到了媒体查询。主页面的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq...
复制链接

扫一扫