媒体查询_媒体查询中的960px是怎么设置的-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45846263/article/details/105875044

网页布局的几种方式：

1.静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
2.自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
3.流式布局：流式布局是以百分比作为单位的你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
4.响应式布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。可以在手机、平板、电脑三种终端完美响应。
5.弹性布局：弹性布局是以em作为单位的，同样弹性布局也支持如下公式：
百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸
使用em将文字像素px转换为相对单位，现在浏览器默认文字的大小是16px，如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/16 =1.5em}.弹性布局也支持响应性web设计。
总结
响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式,流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。响应式/自适应网页设计好处是各种不同的设备下都能正常浏览器，且不需要编写不同的版本，缺点是当页面代码结构代码结构非常复杂，此时用响应式网页编写难度就更大了。
在这里插入图片描述

媒体查询

响应式布局的关键技术是CSS3中的媒体查询，可以在不同分辨率下对元素重新设置样式（不只是尺寸），在不同屏幕下可以显示不同版式，一般来说响应式布局配合流式布局效果更好。
设置 Meta 标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

viewport标签 视口屏幕中浏览器网页的窗口
width: 控制viewport的大小。如device-width为设备的宽度。
initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
user-scalable：用户是否可以手动缩放，

yes,true允许用户缩放；
no、false不允许用户缩放。 (只设置这一个属性，有的浏览器并不生效，我们需要配合maxinum-scale和mininum-scale最大缩放与最小缩放分别为1:1, user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题)

通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心。
CSS3 Media Query 根据浏览网页的设备类型不同的设备执行指定的某些css 放弃执行其他
语法：

@media 设备类型 and (设备特性-宽度) {
     // css 样式
}

如：

最大宽度960px一种布局：
@media screen and (max-width:960px) {<=960}
最小宽度600px 另一种布局：
@media screen and (min-width:600px) {>=600}
宽度在600px 到 960px之间，如下:
@media screen (min-width:600px) and (max-width:960px) {600<=x<=900}

外联样式使用link标签来引用样式：
<link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/>
<link rel=”stylesheet” href=”xx2.css” media=”screen and (min-width:600px)”/>
<link rel=”stylesheet” href=”xx3.css” media=”screen and (min-width:600px) and (max-width):960px”/>
Media : 浏览网页的设备
all：所有设备
screen：显示器
print：打印用纸或打印预览视图
handled：便携设备
tv ：电视机类型的设备
speech ：语音和音频合成器
braille ：盲人用点字法触觉回馈设备
embossed ：盲人打印机
projection ：各种投影设备
tty ：使用固定密度字母栅格的媒介，比如电传打字机和终端

注意：
1.容器尽量使用相对尺寸
使用百分比或者auto
2.图片尽量使用相对尺寸百分比或者max/min-width
如果只是页面上静态图片的话，不考虑带宽的情况下，可以使用width=100%”等比例缩放，如：<img src=”XX.png” width=”100%”/> 但这样会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。img { width: auto; max-width: 100%; } 确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度，所以当窗口或容器的可视部分变窄时，图片的最大宽度值也会相应的变小，图片本身永远不会覆盖容器。
3.文本大小尺寸相对尺寸手机默认为10px，pc为14px，网站为12px；
css单位px，em，rem的区别
1.px是css中最基本的长度单位，在PC端，设计稿多少像素，页面css就写多少像素。
2.em 是相对单位，相对于上下文元素而言，一般情况下，浏览器默认的字体大小是16px，也就是1em等于16px；
3. rem也是相对单位。rem是相对于html根元素来计算的，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
比如设置html根元素如下代码：

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

当一个p元素是24px的话，那么转换成rem为单位的话，那么只需要如下这样写即可：

p {font-size: 2.4rem; /*2.4 × 10px = 24px */

参考：https://blog.youkuaiyun.com/qq_36911154/article/details/78152538

例子

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" name="viewport" content="device-width=width,initial-scale=1.0"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/css.css"/>
 </head>
 <body>
  <div class="all">
   <div class="all_top">
    <div class="top">
      <ul>
      	<li>首页</li>
      	<li>影集</li>
      	<li>活动</li>
      </ul>
     	<input type="text" name="" id="" value="" placeholder="search...."/>
    </div>
    <div class="left">
	 <ul>
	   <li>锦绣中华</li>
	   <li>异国风情</li>
	   <li>复古风潮</li>
      </ul>   
    </div>
    <div class="midlle">
     <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>
    </div>
    <div class="right">
     
    </div>
   </div>
  </div>
 </body>
</html>


*{
  margin: 0px;
  padding: 0px;
}
ul, ol{
  list-style: none;
}
.all{
  width: 1007px;
  border: 1px solid;
  box-sizing: border-box;
}
.all .all_top {
  display: flex;
  flex-flow: wrap;
}
.all .all_top .top {
  width: inherit;
  border-radius: 2px;
  background-color: #004452;
  position: relative;
}
.all .all_top .top ul li {
  display: inline-block;
  font-size: 19px;
  color: white;
  font-weight: 900;
  padding: 0px 5px;
}
.all .all_top .top input {
  border-radius: 2px;
  width: 169px;
  height: 30px;
  border: none;
  position: absolute;
  right: 7px;
  bottom: 5px;
}
.all .all_top .left {
  height: 194px;
  background-color: #5d145e;
}
.all .all_top .left ul{
 margin: 27px auto;
}
.all .all_top .left ul li{
 width: inherit;
 height: 40px;
 line-height: 40px;
 margin-bottom: 10px;
 background-color: white;
 color: black;
}
.all .all_top .midlle {
  display: inline-block;
  box-sizing: border-box;
  padding: 10px;
  background-color: #ffb852;
}
.all .all_top .midlle ul{
 font-size: 0px;
}
.all .all_top .midlle ul li{
  display: inline-block;
  height: 200px;
}
.all .all_top .midlle ul li:nth-child(1){
 background-color: red;
}
.all .all_top .midlle ul li:nth-child(2){
 background-color: yellow;
}
.all .all_top .midlle ul li:nth-child(3){
 background-color: blue;
}
.all .all_top .midlle ul li:nth-child(4){
 background-color: green;
}
.all .all_top .right {
  width: 194px;
  height: 220px;
  background-color: #5d5207;
}
@media only screen and (max-width: 647px) {
  .all {
    width: 647px;
  }
  .all_top {
    width: 647px;
  }
  .top {
   height: 75px;
    margin-bottom: 0px;
  }
  .midlle {
    height: 582px;
    width: inherit;
  }
  .all .all_top .midlle ul li{
   width: 313px;
  }
  .right {
    display: none;
  }
  .left {
   display: block;
    width: inherit;
  }
  .all .all_top .left ul{
   width: 516px;
  }
 }
@media screen and (min-width: 647px) and (max-width: 768px){
  .all {
    width: 770px;
    padding: 5px 7px 0px 13px;
  }
  .all_top {
    width: 750px;
  }
  .top {
    margin-bottom: 0px;
  height: 45px;
  line-height: 45px;
  }
  .midlle {
   height: 436px;
    width: 547px;
   margin-left: 15px;
  }
  .all .all_top .midlle ul li{
   width: 132px;
  }
  .all .all_top .midlle ul li:nth-child(1){
 width: 131px;
 }
  .right {
    display: none;
  }
  .left {
    width: 188px;
  display: inline-block;
  }
  .all .all_top .left ul{
   width: 150px;
  }
}
@media only screen and (min-width: 768px) {
  .all {
    width: 1007px;
    padding: 6px 17px 0px 20px;
  }
  .all_top {
    width: 970px;
  }
  .top {
    margin-bottom: 10px;
    height: 45px;
 line-height: 45px;
  }
  .midlle {
    width: 561px;
    height: 436px;
   margin: 0px 10px;
  }
  .all .all_top .midlle ul li{
   width: 132px;
  }
  .all .all_top .midlle ul li:nth-child(1){
 width: 131px;
 }
  .right {
    display: block;
  }
  .left {
    width: 194px;
    display: inline-block;
  }
  .all .all_top .left ul{
   width: 150px;
  }
}

在这里插入图片描述

only是为了在不支持媒体查询的浏览器中隐藏样式表，浏览器处理以only开头的关键词时将会忽略only。

media="only screen and (min-width: 401px) and (max-width: 600px)"
/* 在支持媒体查询的浏览器中等于*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。（由于没有only这种媒体类型，因此将不会被应用）*/
 media="only" /*如果不带only，在不支持媒体查询的浏览器中*/
 media="screen and (min-width: 401px) and (max-width: 600px)"
/*将被解析为screen，将会被应用到屏幕类型设备上*/
 media="screen"