如何实现自适应布局

最新推荐文章于 2024-08-08 13:55:38 发布

Lora_0925

最新推荐文章于 2024-08-08 13:55:38 发布

阅读量3.9k

点赞数 5

分类专栏： HTML 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/Lora_0925/article/details/121106078

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

其他文章参考：

flexible.js 布局详解-前端开发博客

rem是如何实现自适应布局的？-前端开发博客

移动端自适应方案-前端开发博客

移动端布局

一、布局概念

1. 静态布局

直接使用px作为单位

2. 流式布局

宽度使用%百分比,高度使用px作为单位

3. 自适应布局

创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。使用@media媒体查询来切换多个布局

4. 响应式布局

通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用

5. 弹性布局

通常指的是rem或em布局。rem是相对于html元素的font-size大小而言的,而em是相对于其父元素(非font-size的是相对于自身的font-size)

二、基本概念

1. 物理像素(physical pixel)

物理像素又被称为设备像素,它是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

2. 设备独立像素(density-independent pixel)

设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟素(比如说CSS像素),然后由相关系统转换为物理像素。

3. CSS像素

CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。

4. 屏幕密度

屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算(PPI)。

5. 屏幕大小计算

windows下,96像素/英寸, Mac下,72像素/英寸1366*7681366/96 = 14.23in768/96 = 8in

屏幕大小: 14.23 乘14.23+8乘8,再进行开根

6. 设备像素比(device pixel ratio)

设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:

设备像素比 = 物理像素 / 设备独立像素

在Javascript中,可以通过 window.devicePixelRatio 获取到当前设备的dpr。在css中,可以通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询,对不同dpr的设备,做一些样式适配。

7. 位图像素

一个位图像素是栅格图像(如:png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)。理论上,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示

8. 视窗 viewport

简单的理解,viewport是严格等于浏览器的窗口。在桌面浏览器中,viewport就是浏览器窗口的宽度高度。

在开发移动端页面,我们可以设置 meta 标签的viewport scale来对视窗的大小进行缩放定义

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

9. rem单位

em:以父元素的font-size来计算,如父元素的font-size: 16px ; 1em =16px
rem:相对于根元素html标签的font-size来做计算,如html的font-size:16px; 1rem = 16px

10.rem如何实现自适应设备

实际的元素 / 设计的元素 == 实际的页面 / 设计的页面

所谓"设计"就是我们写代码期望网页呈现出来的样子,所有元素的大小和位置都和我们预想的一摸一样。通常在电脑端呈现出来的就是和设计的是一样的,但是移动端由于屏幕比电脑端小,呈现出来的样子就会不太一样,错位时有发生,所以才需要适配。

如果上面的等式恒成立,则说明适配成功。实际的元素 == 设计的元素 * ( 实际的页面 / 设计的页面),也就是是说需要知道( 实际的页面 / 设计的页面),设为k。试想,如果css中有一个属性能知道这个比例k,那么适配问题就已经完美解决了。可惜,并没有这个属性。但是,幸运的是,rem可以充当我们和这个比例之间的桥梁,rem可以看作一个单位,它可以和根元素的文字大小关联,也就是说把html的font-size设为k,比如设备屏幕尺寸是300px,设计稿宽度是00px,则html的字体大小就是320/640 = 0.5px,没错,这个值一般都很小,但是font-size的值一般在10px以上,虽然html里的font-size肯定会被下面设置的font-size所覆盖,但是出于习惯,还是会将这个k值乘上一个系数,一般是100。

这样,我们就找到了页面上不变的东西,就可以以不变应万变。至此,页面上所有元素的大小都可以用rem,或者说比例k来表示。

根据不同屏幕大小计算html中的font-size大小:

<script>
(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      var clientWidth = docEl.clientWidth;

      if (!clientWidth) return;

      if (clientWidth >= 640) {
        docEl.style.fontSize = "100px";
      } else {
        docEl.style.fontSize = 100 * (clientWidth / 640) + "px";
      }
    };

  if (!doc.addEventListener) return;

  win.addEventListener(resizeEvt, recalc, false);

  doc.addEventListener(
    "DOMContentLoaded",
    recalc,

    false
  );
})(document, window);
</script>

//上面这段代码的大意是:如果页面的宽度超过了640px,那么页面中html的

font-size恒为100px,否则,页面中html的font-size的大小为: 100 *(当前页面宽度 / 640)

页面中计算大小的公式: 实际大小(rem) = 测量的大小(px)/html的font-size大小(px)

11.视窗单位

vw : 1vw 等于视窗宽度的1%

vh : 1vh 等于视窗高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个