移动端开发必备基础知识：像素、DPR、视口、媒体查询、常用单位、FLEX布局等

最新推荐文章于 2024-11-10 01:47:45 发布

E-A-D-G-B-E

最新推荐文章于 2024-11-10 01:47:45 发布

阅读量3.9k

点赞数 8

文章标签： web app

本文链接：https://blog.youkuaiyun.com/z591391960/article/details/106200183

版权

基础知识

像素相关的：

分辨率
物理像素（physical pixel）也叫设备像素（dp：device pixel）
CSS像素也叫逻辑像素（logical pixel）也叫独立设备像素（dip：device independent pixel）
设备像素比（dpr）（device pixel ratio）
标清屏和高清屏
缩放
PPI/DPI

1、分辨率
1792 X 828像素：垂直方向1792个点、水平828个点
2、物理像素
分辨率的一个点就是一个物理像素，实际开发中不是以物理像素为准
3、CSS像素

实际开发中使用的像素

	.container {
    	width: 200px;// css像素
    }

CSS像素和物理像素的联系
- 在标清屏（standard）中，一个css像素对应的是一个物理像素
- 在高清屏（Retina）中，一个css像素对应的是四个物理像素
- 四个物理像素代替一个物理像素去描述事物，所以高清屏幕的高分辨率效果更好

4、设备像素比

dpr：device pixel ratio
dpr = 设备像素 / css像素（缩放比是1的情况下，即不缩放）
水平方向或者垂直方向的比率
上述标清屏幕一个css像素是一个物理像素，所以dpr=1
上述高清屏幕一个css像素是4（2x2）个物理像素，所以dpr=2/1=2
dpr = 2表示一个css像素用2x2个设备像素来绘制

5、标清屏和高清屏

标清屏幕dpr=1
高清屏幕dpr>=2

6、缩放

缩放的是css像素
比如放大至2倍，原来1x1的方块变成了2x2，视觉效果放大2倍，对应的物理像素也变成了2x2，那么一个css像素 = 2x2物理像素
同理缩放0.5倍，四个css像素 = 1一个物理像素

7、PPI/DPI

表示每英寸屏幕中物理像素的点，来表示物理像素密度
PPI: pixels per inch
DPI: dots per inch
PPI是可以计算出来的：
例如一个手机是6.1英寸（对角线），1792 X 828像素分辨率
那么就可以根据勾股定理算出对角线的像素个数为n
ppi = 6.1 / n = 326ppi

视口

现象：如果用PC网页手机模式预览，那么会造成网页缩放严重，无法进行正常操作
原因：因为原PC网页宽度至少为980px，变成手机模式的三百多像素时候，会强制进行缩放，那么各模块的宽度就会变很小
解决方案：在html中加入viewport声明，根据设备宽度自适应：

 	// 写法一：可以进行宽度指定
	<head>
    	<meta name="viewport" content="width=device-width">
    </head>

    // 写法二：指定缩放比例为1，即不缩放
    <head>
    	<meta name="viewport" content="initial-scale=1">
    </head>

    // 为了兼容不容浏览器，最好写法一和写法二都写上，
    // user-scalable=no, maximum-scale=1, minimum-scale=1不允许用户缩放
    // 微信内置浏览器生效，即使这样声明不可以缩放，国外很多浏览器还认为用户是可以是缩放的
    <head>
    	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
    </head>

怎样获取设备的宽度？

	// 方法一
    window.innerWidth;

    // 方法二
    document.documentElement.clientWidth;

    // 方法三
    document.documentElement.getBoundingClientRect().width

    // 浏览器兼容写法
    window.innerWidth || document.documentElement.clientWidth || document.documentElement.getBoundingClientRect().width

怎样获取设备的dpr？

	window.devicePixelRatio;

box-sizing

PC端由于浏览器兼容性一般不使用这个属性
两个值content-box、border-box
如果设置为content-box，那么描述的宽高是内容宽高，如果加上padding或者border属性，那么就会往外扩张，会影响原始布局
如果设置为border-box，那么描述的宽高是加上padding和border的宽高，如果使用padding或border，内容就会往里压缩，不会影响原始布局

图标字体

可操控的图标，可以理解为和字体属性很像的图标库
阿里巴巴字体图标库：链接

媒体查询

什么是媒体查询

作用：媒体查询是查询屏幕类型和屏幕大小
示例：如果屏幕宽度超过900像素，就把北京颜色设置为red

	// 如果是浏览器页面并且宽度大于900px，那么背景颜色就为红色
	@media screen and (min-width:900px){
    	body{
        	background-color: red;
        }
    }

为什么要媒体查询

一套样式不可能适应各种大小的屏幕
根据屏幕的大小写样式
让我们的页面在不同大小的屏幕上都能显示

媒体的类型

all：默认的类型，表示所有的
screen：浏览器页面
print：打印页面，ctrl+p打印的时候判断
speech：针对残障人士设计的，这个一般接触不到

	// 表示在打印页面上，如果宽度超过900就会变红
	@media print and (min-width:900px){
    	body{
        	bgcolor:red;
        }
    }

媒体查询中的逻辑

与（and）
或（，）
非（not）

	// 宽度介于1024和900之间会变红
    @media screen and (min-width: 900px) and (max-width: 1024px){
    	body{
        	bgcolor: red;
        }
    }

    // 宽度大于1024或者屏幕为浏览器屏幕并且宽度大于900会变红
    // , 的优先级高于and
    @media screen and (min-width: 1024px), (max-width: 900px){
    	body{
        	bgcolor: red;
        }
    }

    // 屏幕为浏览器屏幕并且宽度大于1024或者屏幕为浏览器屏幕并且宽度大于900会变红
    // , 的优先级高于and
    @media screen and (min-width: 1024px), screen(max-width: 900px){
    	body{
        	bgcolor: red;
        }
    }

	// not和and放在一起使用，等于not (screen and (min-width: 1024px) and screen(max-width: 900px))
    @media not screen and (min-width: 1024px) and screen(max-width: 900px){
    	body{
        	bgcolor: red;
        }
    }

媒体特征表达式

1、获取宽度监听：width/max-width/min-width
2、获取DPR监听：-webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
3、获取横屏还是竖屏：orientation：landscape横屏/portrait竖屏
4、监听高度，一般用不到：height
5、监听设备宽高，一般用不到：device-width/device-height screen.width/screen.height
6、监听视口的宽高比：aspect-ratio

媒体查询-策略

策略是指对不同屏幕的布局策略，可以理解为利用media对窗口的监听，从而使用不同的布局方式进行适配
根据不同的宽度进行断点区域划分
断点怎么来的？改变屏幕大小，当页面显示不正常时候，就需要设置断点了
写的原则，可以是PC first 也可以是mobile first
断点区域列表，根据测算出来：

xs: < 576px
sm: 576px - 768px
md: 768px - 1200px
xl: > 1200px

移动端的常用单位

px/%/em/rem/vw/vh

em：根据自身的fontsize大小，移动端并不常用，首行缩进的时候可以考虑用到，缩进2em
rem：root em，用的比较多，用来统一布局，统一缩放
vw：视口宽度的百分之1
vh：视口高度的百分之1

	// 实现布局随着窗口大小统一缩放
    setRemUnit();

    window.onresize = setRemUnit;

    function setRemUnit(){
    	var docEL = document.documentElement;
        var portWidth = docEL.clientWdith;

        docEL.style.fontSize = portWidth / defaultWidth * defaultFontSize + “px”;
    }

FLEX布局(弹性布局)

flixible Box
flex容器：使用display： flex就是flex容器
项目：flex容器中的子元素就是项目，不包括孙子元素
默认主轴方向排列，即横向

Flex-容器的属性

1、display属性

作用：指定flex属性
取值：flex | inline-flex
flex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%
inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度

2、flex-direction

作用：指定容器的主轴方向，主轴默认为水平向右方向，项目排列的方向
取值：row | row-reverse | column | column-reverse
row：默认值，主轴横向往右排列
row-reverse：主轴横向往左反向排列
column：垂直方向排列
volumn-reverse：垂直方向反向排列

3、flex-wrap

作用：描述如果一个轴线排列不下，如何换行
取值：nowrap | wrap | wrap-reverse
nowrap：默认不换行，会压缩子元素
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

4、flex-flow

作用：是flex-direction和flex-wrap和合并缩写形式
取值：flex-direction || flex-wrap

 	// 下方写法一和写法二效果一样：
	// 写法一
    .box {
    	flex-flow: row wrap;
    }

    // 写法二
    .box {
    	flex-direction: row;
        flex-wrap: wrap;
    }

5、justify-content属性（justify单词的意思是两端对齐）