适配与视口、分辨率、媒体查询、缩放的学习、消化

最新推荐文章于 2024-05-11 09:49:42 发布

bug丸

最新推荐文章于 2024-05-11 09:49:42 发布

阅读量916

点赞数

分类专栏：杂乱分类（html css为主）文章标签： css css3

本文链接：https://blog.youkuaiyun.com/weixin_50576800/article/details/126325947

版权

杂乱分类（html css为主）专栏收录该内容

36 篇文章

订阅专栏

适配与视口、分辨率、媒体查询、缩放

浏览器：

移动端浏览器

内置浏览器：就是手机自带的，更新慢，一般是系统更新才可能更新

可以安装的浏览器：更新快

pc端浏览器

像素

css像素: web开发的最小单元， px

物理像素：屏幕显示的最小颗粒，真实存在的点；

屏幕分辨率：也就是横纵向上的像素点的个数，一般以纵向像素*横向像素

1个css像素1px不一定等于1个物理像素

屏幕尺寸：手机的对角线长度，1英寸=2.54cm

设备独立像素：浏览器中看到的移动设备像素，是设备提供，用来对接css像素的接口

位图像素：一个栅格图像（png,jpg……）的最小单元；一个位图像素对应一个物理像素，图片才能清晰展示，图片呈现的最小单元

像素比：设备物理像素与设备独立像素的比例（一个方向上占满整个屏幕所需的物理像素的个数/一个方向上占满整个屏幕所需的设备独立像素的个数）简单地理解就是1px所能显示的物理像素个数

当加上meta标签后，width=device-width，那么等同于css像素等于设备独立像素

视口

浏览器显示页面的屏幕区域

视口单位是css像素px，

布局视口：就是整个网页的大小（也就是html的宽高）

在PC端上，布局视口默认就是浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条

视觉视口：我们在设备上看到的网页的大小（不是指设备的宽度）

用户看到的网页区域大小；浏览器不压缩，我们通过手动缩小，改变观看的区域，此时，视觉时候就变大了，因为我们看到的网页区域变大了；但是它不会影响布局视口，作用是改变了css像素与物理像素的比

布局视口会限制CSS布局；视觉视口决定用户看到的网站内容

理想视口：不需要缩放，就可以直接看到完整页面，而且与设计一样

布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)

手动缩放会改变视觉视口的大小

媒体查询与分辨率、缩放、窗口宽度

作用：

视口的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式）
分辨率

设备的宽度和高度（device-width，后面好像被弃用）

值	描述	其他
width	视口宽度
max-width	显示区域的最大宽度，例如浏览器窗口
min-width	显示区域的最小宽度，例如浏览器窗口
orientation	视窗（viewport）的旋转方向（横屏还是竖屏模式）

如果浏览器窗口宽小于1920px,就是绿色背景

      @media screen and (max-width: 1920px) {
        body {
          background-color: green;
        }
      }

横屏是背景色为蓝色

      @media only screen and (orientation: landscape) {
        body {
          background-color: skyblue;
        }
      }

显示时为红色字体，打印时为黑色字体

@media screen {
  body {
    color: red; 
  }
}

@media print {
  body {
    color: black; 
  }
}

缩放与窗口大小改变的影响分析：

    <div class="box"></div>
      .box {
        width: 100%;
        height: 500px;
      }
      @media (max-width: 980px) {
        .box {
          background-color: skyblue;
        }
      }
      @media (min-width: 980px) and (max-width: 1560px) {
        .box {
          background-color: greenyellow;
        }
      }
      @media (min-width: 1560px) and (max-width: 3600px) {
        .box {
          background-color: orange;
        }
      }
      @media (min-width: 3600px) {
        .box {
          background-color: green;
        }
      }

1》直接修改浏览器的缩放（设置或ctrl+滚轮）:

屏幕的分辨率发生改变，放大时，分辨率变小（像素点变大，横向所能排放的像素点变少）；由于html的宽度默认时100%，页面的大小（布局视口）也发生改变，width的css像素变小；

改变缩放时颜色会发生改变；由于我的布局视口是width:100%，默认是1920px（html的宽度默认为100%），和分辨率一样;（而且视觉视口大小和布局视口一样大）默认是橙色；放大时，分辨率的变小，布局视口变小，我们的媒体查询会检测到浏览器窗口宽度变小，颜色会变为草绿色，再变为浅蓝色；如果从100%缩小，分辨率的变大，布局视口和视觉视口变大，媒体查询检测到浏览器窗口宽度变大，颜色会变为绿色

2》窗口大小的变化：

窗口变小，像素点大小没变，窗口能够放的像素点个数变小，所以浏览器分辨率变小；我们的布局视口也变小

缩小窗口，颜色由橙色变为草绿色，再变为浅蓝色，浏览器分辨率变小，布局视口也变小了

**电脑分辨率的修改：**系统分辨率的改变，浏览器的分辨率自然也会跟着改变，默认100%缩放的情况下，浏览器的分辨率和宽高就是与分辨率保持一致

**电脑显示设置中的缩放：**与窗口的缩放效果一样

meta标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0, use-scalable=no,maximun-scale=1.0,minimux-scale=1.0"/>

作用：让当前viewport（布局视口）的宽度等于设备的宽度，同时不允许用户手动缩放

key	value	explain
width	device-width/px	将布局视口的宽度设置为设备宽度；一般直接写device-width,只有ios才支持px
initial-scale	num>0	设备宽度与视口大小之间的缩放比率，一般设置1.0
user-scalable	yes/no 或 1/0	ios不支持，所以为了不让用户缩放，会加上最大、小缩放
maximum-scale	num	1.0，搭配minimum-scale不让用户缩放
minimum-scale	num	1.0

width = device-width

initial-scale=1.0,他会让我们的布局视口跟着视觉视口一起旋转变化

user-scalable=no，

maximum-scale=1.0,因为ios不支持user-scalable标签，所以才使用maximum-scale与minimum-scale

minimum-scale=1.0

适配

适配就是为了页面在不同设备上等比

作用：加上meta标签后还能等比

百分比适配

只能做一些简单的宽高，其他样式不能改，比如字体不能改变

rem适配

rem单位：html跟标签的字体大小

原理：将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间

步骤：

开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标是基于此宽度标注）
开始开发，对设计稿的标注进行转换
对于需要等比缩放的元素，CSS使用转换后的单位
对于不需要缩放的元素，比如边框阴影，使用固定单位px

优点：可以使用完美视口

缺点：px到rem转换麻烦

  <script>

    (function () {

      var styleNode = document.createElement("style");

      var w = document.documentElement.clientWidth / 16;

      styleNode.innerHTML = "html{font-size:" + w + "px!important}";

      document.head.appendChild(styleNode);

    })();

  </script>

viewport适配

将所有布局视口的宽度调整为设计图的宽度，然后需要动态的根据设备屏幕宽度设置 initial-scale 的值

步骤：

将所有设备的布局视口宽度作为设计图宽度

确定设计图的缩放比例

选中viewport标签，改变content值

原理：改变不同设备1个css像素与物理像素的比值

优点：所量及所得

缺点：破环了完美视口

<head>
  <script>
    // 设计稿宽度
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width / WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if (!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
      }
      meta.setAttribute('content',content)
    }
    mobileAdapter()
    window.onorientationchange = mobileAdapter //屏幕翻转时再次执行
  </script>
</head>