移动端布局

时间：2022-12-14 01:18:54

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

文章目录

移动端布局方案

什么是移动端

移动终端或者叫移动通信终端，是指可以在移动中使用的计算机设备，
广义的讲包括手机、笔记本、平板电脑、POS机甚至包括车载电脑。

设计 app 原型图 ==> 根据原型图 实现页面布局 （移动端页面）

移动端页面

查看移动端页面： 浏览器页面打开 鼠标右击 检查 ==> 单击 左上方第二个按钮

iphone 6/7/8		===>  手机型号
375*667    			===>  手机屏幕的分辨率
75%					===>  理解为：最佳观看比例
旋转小图标			 ===>  点击时切换横屏和竖屏
最右边的三个圆点	   ===>  能够获取“手机”信息

移动端准备工作

meta 标签

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

几个参数解释：

  • width = device-width：宽度等于当前设备的宽度
  • initial-scale：初始的缩放比例（默认设置为1.0）
  • minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
  • maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
  • user-scalable：用户是否可以手动缩放
    （默认设置为no，因为我们不希望用户放大缩小页面）

设备像素比

设备像素比（Device Pixel Ratio, DPR）：其实指的是 window.devicePixelRatio,
被所有WebKit浏览器以及Opera所支持，一个设备的物理像素与逻辑像素之比

物理像素/设备像素：就是手机生产时会有多少物理像素点
逻辑像素/css像素：css样式代码中使用的像素

以ipone6为例子，设备的宽高为375667,有7501334个物理像素颗粒, dpr = 2 (常说的二倍图)

UI设计师按照手机物理像素出设计稿，切图时根据其设备像素比来换算设备独立像素（CSS像素）
比如 手机iPhone6，物理像素 750px × 1334px，由于其设备像素比为2
CSS切图时需要将设计稿的所有尺寸除以2，才是正确CSS像素值

普通屏幕 VS Retina 屏

是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度
拥有的物理像素点数比非高清屏多4倍甚至更多
如果还按照DPR=1进行展示，那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4
这样的话由于图片在屏幕上的展示面积大大缩小，也会导致出现“看不清”的问题

普通屏幕：css像素：物理像素 = 1:1
retina屏：css像素：物理像素 = 1:4

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果

实际操作为：
对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，
如果表达式结果为假，媒体查询内的CSS将被忽略
基本语法：

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
	CSS-Code;
}

not | only | and 关键词
not：not 关键字反正整个媒体查询的含义。
only：only 关键字可防止旧版浏览器应用指定的样式
这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响
and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起

它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型

https://www.w3school.com.cn/cssref/pr_mediaquery.asp

实例代码：

@media only screen and (max-width: 320px) {
	html {
		font-size: 12px;
	}
}
			
@media only screen and (min-width: 321px) and (max-width: 375px) {
	html {
		font-size: 14px;
	}
}

@media only screen and (min-width:376px ) {
	html {
		font-size: 16px;
	}
}

竖屏：
@media screen and (orientation:portrait) {对应样式}
横屏：
@media screen and (orientation:landscape) {对应样式}

iphone5:320px
iphone6/7/8:375px
iphone6/7/8plus:414px

rem 单位

什么是rem?

  • rem（font size of the root element）是指相对于根元素的字体大小的单位

  • 简单的说它就是一个相对单位

  • 看到rem大家一定会想起 em 单位，em（font size of the element）是指相对于父元素的字体大小的单位

  • 它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算

  • px, em, rem 三者有什么区别？

    1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变，一般用于元素的边框或者定位
    2. em 和 rem 相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局
    3. em 相对于父元素，rem 相对于根元素

  • rem布局原理
    拿到设计稿，按照设计稿的宽去设置一个合适的rem ,
    配合js查询屏幕大小来改变html的font-size，从而达到适配各种屏幕的效果

​

标签：

相关文章