移动端布局方法详解

最新推荐文章于 2024-05-13 00:02:56 发布

Kenny_Xu_00101854

最新推荐文章于 2024-05-13 00:02:56 发布

阅读量1.6k

点赞数 2

分类专栏：大前端文章标签：移动开发 css3 flex

本文链接：https://blog.csdn.net/X_trans/article/details/120087970

版权

大前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

移动端布局方法详解

移动端布局方法详解

常见的移动端布局方式有：flex布局、流式布局、rem布局、响应式布局等

基本概念

设备像素：又称物理像素，是指设备所能显示的最小单位，可以看作显示器上的一个点

像素分辨率就是用设备像素来计算的，如电脑的1920x1080，iPhone6的750x1334
设备独立像素：设备使用程序来描绘数据的虚拟像素，主要为了解决高分辨率屏幕像素不能与普通屏幕一一对应的问题

使用设备独立像素能保证在高分屏和普通屏显示的布局、图像等尺寸保持一致

可以在浏览器控制台中输出 screen.width 和 screen.height 查看设备独立像素
设备像素比（DPR）：是指设备像素与设备独立像素的比值，设备像素比越高渲染越精致

$DPR=\frac{设备像素}{设备独立像素}$

在浏览器控制台中使用 window.devicePixelRatio 可查看当前设备的DPR
css像素：css像素用于逻辑上衡量像素的单位，是web编程的概念，它本身是抽象的，实际上并不存在

注意：pc端css像素与设备独立像素是一一对应的，但在移动端就不一定了。
屏幕尺寸：指屏幕对角线长度，以英寸为单位
像素密度（PPI）：指每英寸屏幕拥有的像素数，PPI的值越高画质越好

$PPI=\frac{\sqrt{横向物理像素数^2+纵向物理像素数^2}}{屏幕尺寸}$

响应式布局

响应式布局是指利用媒体查询（media queries）针对不同的媒体类型定义不同的样式，从而实现响应式布局

视口 viewport

视口就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口（layout viewport）、可视视口（visual viewport）和理想视口（ideal viewport）
布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面在手机上显示的问题

iOS、Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只是元素看上去很小，默认支持手动缩放网页

layout viewport可通过修改 document.documentElement.clientWidth 属性来改变大小
视觉视口 visual viewport

视觉视口是指用户当前正在浏览的网站的区域。我们可以通过缩放操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度
理想视口 ideal viewport

理想视口是为了让网站在移动端有最理想的浏览和阅读宽度，对设备来讲是最理想的视口尺寸，需要手动填写meta视口标签通知浏览器操作

加meta视口标签的主要目的是让布局视口的宽度应该与理想视口的宽度一致。简单理解就是设备有多宽，我们布局的视口就有多宽

注意：开发最终使用的是理想视口，就是将布局视口的宽度修改为视觉视口，通过meta标签进行设置

现代网页需要将布局视口设置成与视觉视口相同大小，方便进行网页制作

示例：<meta name="viewport" content="width=divice-width, initial-scale=1.0">

取值	含义
width	设置布局视口的宽度，device-width表示设备宽度
height	设置布局视口的高度，一般不需要设置
initial-scale	设置页面的初始缩放
minimum-scale	设置页面的最小缩放
maximum-scale	设置页面的最大缩放
user-scalable	设置页面是否支持手动缩放

理想设置为：

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许缩放比例1.0
最小允许缩放比例1.0

媒体查询写法示例：

/**
  * media媒体查询写法
  * @media后面跟媒体类型
  * and() 条件查询的拼接
  * 括号内写查询条件，max-width:500px指屏幕宽度小于500px时生效
  */

/* 单个媒体查询条件的写法 */
@media screen and (max-width:500px) {
 .container {
   display: flex;
  }
}
/* 多个媒体查询条件写法 */
@media screen and (min-width:500px) and (max-width:1000px) {
 .container {
   display: inline-block;
  }
}

媒体类型：

取值	含义
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑、平板、智能手机等设备的屏幕
speech	用于屏幕阅读器等音频设备

常见查询条件：

and()、not()

min-width、max-width

orientation: portrait（竖屏）、orientation: landscape（横屏）

流式布局

流式布局就是指百分比布局，也称非固定像素布局。通过将盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

流式布局方式是移动端web开发使用的比较常见的布局方式。

优点：大屏幕下可以显示更多的内容

缺点：宽屏下比例不协调

/* 流式布局写法示例：使用百分比设置宽高，让浏览器自适应 */
.container {
    width: 100%;
    height: auto;
}

rem布局

页面布局单位：

pt：绝对单位，等同于设备像素
px：相对单位，等同于设备独立像素
em：相对单位，若当前元素未设置font-size则em的取值相对于父元素的font-size计算；若当前元素设置了font-size则em的值相对于自身的font-size计算
rem：即root+em，相对单位，取值相对根元素HTML的font-size计算

rem布局的思路就是设置根元素<html>的font-size，子代元素用rem作为单位进行布局

动态设置font-size：

通过原生Javascript：

<script>
    window.onresize = () => {
        // 保持font-size 等于 100
        var fontSize = document.documentElement.clientWidth / 3.75; // 视口宽度375就除以3.75
        document.documentElement.style.fontSize = fontSize + 'px';
    }
</script>

通过vw：

html {
      width: 26.667vw; /* 375px/100vw = 100px / ?   =>   ? = 100*100/375vw */
  }

flex布局

开启flex布局只需要在最外层容器设置 display: flex; 即可，整个网页就可以看成是一个flex容器。采用flex布局的容器称之为flex容器，所有子容器自动生成容器成员，称之为flex项目

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end

在这里插入图片描述

当开启flex布局后，flex项目会沿着主轴方向排列

容器属性：是指设置在flex容器上的属性，主要包括：

justify-content：描述flex项目在主轴方向上的排列方式

取值	意义
flex-start（默认）	所有项目靠左对齐
center	所有项目水平居中对齐
flex-end	所有项目靠右对齐
space-between	两端对齐，且所有项目间距相等
space-around	项目之间的间距为左右两侧边距的两倍
space-evenly	平均排列所有项目

align-items：描述flex项目在交叉轴方向上的排列方式

取值意义
flex-start（默认）所有项目顶部对齐
center 所有项目垂直居中对齐
flex-end 所有项目底部对齐

取值	意义
flex-start（默认）	所有项目顶部对齐
center	所有项目垂直居中对齐
flex-end	所有项目底部对齐

flex-direction：指定主轴方向

取值	意义
row（默认）	所有项目按行排列，且主轴方向为水平向右
row-reverse	所有项目按行排列，且主轴方向为水平向左
column	所有项目按列排列，且主轴方向为垂直向下
column-reverse	所有项目按列排列，且主轴方向为垂直向上

flex-wrap：描述主轴项目超长时的折行策略

取值意义
nowrap（默认）当项目总宽度大于布局容器时强行等分容器宽度，不折行
wrap 项目会根据自身宽度进行排列

取值	意义
nowrap（默认）	当项目总宽度大于布局容器时强行等分容器宽度，不折行
wrap	项目会根据自身宽度进行排列

项目属性：是指设置在flex项目上的属性，主要包括：

order：用于决定项目排列顺序，取值越小项目排列越靠前
align-self：当某个元素需要单独排列时使用

取值意义
flex-start（默认）交叉轴上顶部对齐
center 交叉轴上垂直居中对齐
flex-end 交叉轴上底部对齐
flex-grow：用于决定项目在有剩余空间的情况下是否放大，默认不放大。（注意：当设置flex-grow属性之后，即使原来设置了固定的宽度，也会被放大）

取值意义
0（默认）不放大，保持原来宽度
1 放大，与其他项目一起撑满整个主轴宽度
flex-shrink：用于决定项目在空间不足的情况下是否缩小。注意：当设置flex-shrink属性之后，即使原来设置了固定的宽度，也会被缩小）

取值意义
1（默认）与其他元素一起等比缩小
0 不缩小，保持原来宽度
flex-basis：用于设置flex项目的宽度，默认为auto，即保持原来设定好的宽度。注意：当设置了flex-basis属性之后，即使原来设置了固定的宽度，也会按flex-basis设置的宽度为主

取值	意义
flex-start（默认）	交叉轴上顶部对齐
center	交叉轴上垂直居中对齐
flex-end	交叉轴上底部对齐

取值	意义
0（默认）	不放大，保持原来宽度
1	放大，与其他项目一起撑满整个主轴宽度

取值	意义
1（默认）	与其他元素一起等比缩小
0	不缩小，保持原来宽度

Kenny_Xu_00101854

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
移动端布局方法详解

文章目录移动端布局方法详解基本概念响应式布局流式布局rem布局flex布局移动端布局方法详解常见的移动端布局方式有：flex布局、流式布局、rem布局、响应式布局等基本概念设备像素：又称物理像素，是指设备所能显示的最小单位，可以看作显示器上的一个点像素分辨率就是用设备像素来计算的，如电脑的1920x1080，iPhone6的750x1334设备独立像素：设备使用程序来描绘数据的虚拟像素，主要为了解决高分辨率屏幕像素不能与普通屏幕一一对应的问题使用设备独立像素能保证在高分屏和普通屏显示
复制链接

扫一扫