Open zonglang opened 5 years ago
移动端和PC端的长宽比区别太大了，肯定要设计不同的UI的。 PC端的话，默认的是布局视口+视觉视口 移动端，一开始是沿用PC端，默认布局视口是980px。 布局视口决定CSS布局，视觉视口决定用户看到什么。 如果说，移动端只是分辨率，尺寸不同，用这样的搭配也没什么问题。 但是，要命的是，移动端自从Retina屏的诞生，小屏也可以有大分辨率，就蛋疼了，同样的css像素，表示的长度变小了。
PC端上，1css像素就等于1物理像素。但是手机上就不一样了。
所以移动端不再单纯的使用css像素，而是使用设备独立像素的概念进行布局。 在理想视口下，布局视口和视觉视口默认相等，当initial-scale = 1时，1css像素 = 1设备独立像素
不同的屏幕就暴露出两个参数独立设备像素(dp)和设备像素比(dpr) 画UI的原理就是，计算出物理设备像素 css像素是一个可以变化的值，跟scale有关，css像素 * scale就是表示的物理像素的值
移动端适配的点就在于，不论是指定物理像素，还是css像素都不能很好地解决问题。 因为不同设备的物理像素不同，dp也不同。 那就只能按照百分比来了，视觉上看上去差不多就行。 方案一是，根据屏幕高度设置根html的font-size，其他的长度单位就是rem 方案二是，每次使用长度时，用一个函数，根据当前设备和视觉稿宽度的比例计算出，当前设备下的长度，这个比较适合在RN中使用，可以直接使用函数计算。 方案三是，使用视口单位，vh，vw，可以在css中直接使用。
移动端web适配方案 理解视口的概念
移动端和PC端的长宽比区别太大了，肯定要设计不同的UI的。 PC端的话，默认的是布局视口+视觉视口 移动端，一开始是沿用PC端，默认布局视口是980px。 布局视口决定CSS布局，视觉视口决定用户看到什么。 如果说，移动端只是分辨率，尺寸不同，用这样的搭配也没什么问题。 但是，要命的是，移动端自从Retina屏的诞生，小屏也可以有大分辨率，就蛋疼了，同样的css像素，表示的长度变小了。
所以移动端不再单纯的使用css像素，而是使用设备独立像素的概念进行布局。 在理想视口下，布局视口和视觉视口默认相等，当initial-scale = 1时，1css像素 = 1设备独立像素
不同的屏幕就暴露出两个参数独立设备像素(dp)和设备像素比(dpr) 画UI的原理就是，计算出物理设备像素 css像素是一个可以变化的值，跟scale有关，css像素 * scale就是表示的物理像素的值
移动端适配的点就在于，不论是指定物理像素，还是css像素都不能很好地解决问题。 因为不同设备的物理像素不同，dp也不同。 那就只能按照百分比来了，视觉上看上去差不多就行。 方案一是，根据屏幕高度设置根html的font-size，其他的长度单位就是rem 方案二是，每次使用长度时，用一个函数，根据当前设备和视觉稿宽度的比例计算出，当前设备下的长度，这个比较适合在RN中使用，可以直接使用函数计算。 方案三是，使用视口单位，vh，vw，可以在css中直接使用。
移动端web适配方案 理解视口的概念