静思田园

Appearance

响应式 ​

网站描述
移动端开发

基础概念 ​

px(pixels)：物理像素，硬件像素，设备像素。

dp,dip(deveice independent pixels)：逻辑像素、设备无关像素、CSS像素。如Chrome浏览器移动模式下的像素值。

js
window.screen.width

dpr（设备像素比）：是电子设备中用于关联物理像素和逻辑像素的概念。物理像素是设备固有的，而逻辑像素则是程序使用的虚拟像素。两者通过DPR（设备像素比）关联‌；设备像素缩放比，即 1dp的长度相当于几个px的长度。可以通过window.devicePixelRatio，获取手机设备的dpr。如iPhone6/7/8 Plus的物理像素（分辨率）为1080*1920，在开发者工具里看到的是414*736，dpr为3，这样计算结果实际物理像素应该为1242*2208，由此可以看来iPhone实际上是把1242*2208硬塞入1080*1920里。

ppi,dpi：像素密度(像素每英寸)，斜向一英寸里的物理像像素量。

水平像素点数2+垂直像素点数2英寸尺寸

如iPhone6的ppi为13342+75024.7=325.6,那么它的每英寸为325个像素点，即ppi为325。

Retina屏(视网膜屏): ppi 大于320。

em: 相对于父元素的font-size的相对单位。

rem: 相对于根元素的font-size的相对单位。

视口（viewpoint） ​

就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口、理想视口。

布局视口：layout viewpoint（不适合做手机页面开发） ​

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的pc端页面在手机上显示的问题。Ios、Android基本都是将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上显示，只不过元素看上去很小，一般默认可以通过手机缩放网页。

js
document.documentElement.clientWidth
视觉视口：visual viewpoint： ​

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口仍保持原来的宽度。

理想视口：ideal viewpoint： ​

为了使网站在移动端有理想的浏览和阅读宽度而设定理想视口，对设备来说，是最理想的视口尺寸需要手动添加meta视口标签通知浏览操作Meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。

  1. 视口就是浏览器显示页面内容的屏幕区域
  2. 视口分为布局视口、视觉视口和理想视口
  3. 我们移动端布局想要的是理想视口，就是手机屏幕有多宽，我们的布局视口就有多宽
  4. 想要理想视口，我们需要给我们的移动端页面添加meta视口标签
js
window.screen.width
Meta视口标签： ​

桌面浏览器设置viewport无效，但可以手动缩放。移动浏览器设置viewport有效，但也能手动缩放。

html
<meta name=”viewpoint” content=”width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum=1.0”>

<style>
   @media (min-device-pixel-ratio: 3) {    }
</style>

device-width和initial-scale可以理解为作用一样，都是控制理想视口与设备尺寸的关系的，即设置初始状态，理想视口宽度为设备的dp。

适配属性

sh
screenSize = 1440 * 2560 ,  screenDensity = 4, dp = 360 * 640
screenSize = 1080 * 1920 ,  screenDensity = 3, dp = 360 * 640
screenSize = 720 * 1280 ,  screenDensity = 2, dp = 360 * 640

移动端原生 ​

IOS用的单位为pt，Android为dp都是使用的设备独立像素。

计算根元素font-size ​

设计稿为 375px 宽，下面公式表示 1px 所占的屏幕尺寸宽度，有以下几点需要说明

  • 100vw 表示 100%视口宽度
  • 因为使用了 vw 宽度系统会根据不同设备自动计算 rem
css
:root {
  font-size: calc(100vw / 375);
}