文章目录

1.物理像素
2.CSS像素
3.设备像素比
4.缩放
5.PPI
6.视口Viewport
- 通过js获取视口宽度
- 通过js获取设备像素比
7.box-sizing
8.图标字体
9.Flex布局
10.媒体查询
- 10.1 什么是媒体查询media query
- 10.2 为什么需要媒体查询？
- 10.3 媒体类型
- 10.4 媒体查询中的逻辑
- 10.5 媒体特征表达式
- 10.6 媒体查询策略
11.移动端的常用单位

1.物理像素

物理像素（physical pixel）也叫设备像素（dp:device pixel），物理像素与设备相关，例如：19801080，1080720

2.CSS像素

CSS像素又称逻辑像素（logical pixel）或设备独立像素（dip:device independent pixel），它与设备无关，是实际开发中使用的像素，例如200px，100px

3.设备像素比

设备像素比（dpr:device pixel ratio）
dpr = 设备像素 / CSS像素（缩放比是1的情况下）

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

4.缩放

缩放改变的是CSS像素的大小
放大：1CSS像素=1个物理像素 => 1CSS像素 = 22个物理像素
缩小：1CSS像素=1个物理像素 => 22CSS像素 = 1个物理像素

5.PPI

每英寸的物理像素点
ppi：pixels per inch
dpi：dots per inch

6.视口Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0，user-scalable=no">

initial-scale：缩放比例
user-scalable：是否允许用户缩放
maximun-scale=1,minimun-scale=1：相当于不允许用户缩放

通过js获取视口宽度

console.log(window.innerWidth);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.getBoundingClientRect().width);// 兼容性方案
var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;

通过js获取设备像素比

console.log(window.devicePixelRatio);

7.box-sizing

box-sizing有两个值：content-box（默认）和border-box
content-box：指定width和height属性为内容的宽和高，内容的宽和高永远不点，因此设置了内填充和边框，就会将容器大小撑开。
border-box：指定了width和height是从border开始计算的，因此容器的总大小是不变的，设置了内填充和边框之后，内容的大小就会被压缩。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximun-scale=1,minimun-scale=1"><title>Document</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><style>div{width: 200px;height: 200px;margin: 10px;background-color: blue;}img{display: inline-block;width: 100%;height: 100%;}.box2{box-sizing: content-box;padding: 10px;}.box3{box-sizing: border-box;padding: 10px;}</style>
</head>
<body><div class="box1"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="box2"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="box3"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
</body>
<script>
</script>
</html>

对于padding，content-box会往外扩张，而border-box整体所占的位置大小不变，对于border也是如此。

box-sizing在移动端开发的应用：
box-sizing的默认值为content-box，这会导致我们稍微修改一下样式就可能会导致容器的大小发生改变，从而影响布局。因此，将box-sizing设置为border-box比较合适。
应用：css reset时将box-sizing设置为border-box

        *{margin: 0;padding: 0;box-sizing: border-box;}

8.图标字体

9.Flex布局

10.媒体查询

10.1 什么是媒体查询media query

@media screen and (min-width:900px){background:red;
}

10.2 为什么需要媒体查询？

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

10.3 媒体类型

all(default)
screen（屏幕）/print（打印预览）/speech

10.4 媒体查询中的逻辑

and 与
, 或
not 非
not 的作用范围为后面所有连续的and，遇到,就会失效

10.5 媒体特征表达式

width
max-width
min-width
-webkit-device-pixel-ratio 设备像素比
-webkit-max-device-pixel-ratio
-webkit-min-decive-pixel-ratio
orientation：landscape（横屏）/partait（竖屏）

10.6 媒体查询策略

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximun-scale=1,minimun-scale=1"><title>Document</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><style>*{margin: 0;padding: 0;box-sizing: border-box;}html{width: 100%;}.row{width: 100%;display: flex;flex-wrap: wrap;}.col{width: 200px;height: 200px;}img{display: inline-block;width: 100%;height: 100%;}/* 断点 *//* xs:<576px;sm:567px-768px;md:768px-992px;lg:992px-1200px;xl:>1200px; */.col {width: 100%;}@media (min-width: 576px) {.col {width: 50%;}}@media (min-width: 768px) {.col {width: 25%;}}@media (min-width: 992px) {.col {width: 16.6666666667%;}}@media (min-width: 1200px) {.col {width: 8.33333333%;}}</style>
</head>
<body><div class="row"><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div><div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div></div>
</body>
<script>
</script>
</html>

11.移动端的常用单位

px：固定单位
%：自适应，相对单位
em：font-size of element，1em=font-size’s height，根据自身的字体大小计算，如果自身的font-size设置为em，会以父元素的font-size为基准进行计算。这个单位在进行首行缩进是十分方便。
rem：font-size of the root element，以根元素的font-size为基准计算。
vw：视口宽度的百分比，1vw = 1% of viewport width
vh：视口高度的百分比，1vh = 1% og viewport width

应用：使用rem做单位，将页面上的元素统一地进行等比例缩放

setRemUnit();window.onresize = setRemUnit;
// 获取视口宽度
function setRemUnit(){var docElement = document.documentElement;var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;docElement.style.fontSize = viewWidth / 375 * 20 + 'px';// 1rem = 20px 在375px的视口宽度下
}

移动端Web开发（一）移动端开发的基本概念相关推荐

【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素--什么是像素像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
移动端web设计尺寸_移动端页面设计规范尺寸大起底
移动端尺寸繁多,包括IOS和安卓,尺寸多达十余种,所以移动页面尺寸的适配一直是前端和设计的头疼.今天来总结一下当前市场上的一些移动端尺寸,方便设计师和前端去考虑适配.但是最好还是针对自己的产品做调查, ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸（上）
由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行.在设计制作移动端网页的时候,你是否疑惑,这种网站设计稿应该做成的多少屏宽,是否应该跟手机的分辨率一致,还是应该按照iPhone的分辨率来设 ...
移动端web设计尺寸_移动端页面设计规范尺寸、h5页面设计规范尺寸，h5适配
https://www.cnblogs.com/fang51/p/4286481.html 移动端尺寸繁多,包括IOS和安卓,尺寸多达十余种,所以移动页面尺寸的适配一直是前端和设计的头疼.今天来总结一 ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
普通pc端开发与移动端开发区别
1,普通pc端开发与移动端开发区别. 普通pc端开发,我理解就是你拿电脑打开的网页都算[这不是废话么]. 那么移动端前端开发工程师,说白了就很好理解了,做手机网页的前端开发工程师. 这么一比,是不是感 ...
轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
移动端web开发分享
移动端web开发浪潮兴起之时,千呼万唤shi出来,在团队内部做的一个分享,以下是写ppt时列出的摘要,时间-2013/09/20 I.前端这个行当 a.发展史 b.前端基本技能介绍(html css ...
移动端 Web 开发踩坑之旅
前言最近在一个移动端的 Web 项目中踩了很多的坑,感觉有必要把它们记录下来,分享给即将踏入移动端 Web 开发大门的新人们. 一.从布局说起移动端的整体布局一般来说可以分为上中下三个部分,分别为 ...
移动端Web开发小记
之前为公司商旅频道写移动端的页面时遇到不少问题,今特来个总结,希望能为后来者带来一些帮助. 不再考虑浏览器兼容性移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此 ...

移动端Web开发（一）移动端开发的基本概念