一、关于vw与rem方案中的一些思考     并不是所有场景下的移动端页面都适合采用vw或rem的方案，这类方案的本质是布局等比例的缩放，让页面在不同尺寸的屏幕下有类似于矢量图片缩放的效果，即保证页面各元素之间位置尺寸的比例关系，并让元素可以清晰地展现。这样的方案更适合于视觉组件种类较多，视觉设计对元素位置的相对关系依赖较强的移动端页面。其实大部分页面都可以使用rem或vw的方案进行适配，但对于文本内容较多，或者说希望引导用户沉浸浏览的页面，我个人并不推荐使用等比缩放的方案，至少并不推荐完全使用等比缩放的方案，对于文本内容还是应该直接使用px这种绝对长度单位，毕竟在大屏手机上用户希望看到的是更多的内容而不是更大的内容。实际上很多这类的网站也确实是直接使用px结合flex等布局方式进行移动端适配的。


二、现有生产环境中移动端适配方案的一点总结

1、px方案
就像开篇提到的，并不是说移动端就一定要使用相对长度单位，传统的响应式布局依然是很好的选择，尤其在新闻，社区等可阅读内容较多的场景直接使用px单位可以营造更好地体验。px方案可以让大屏幕手机展示出更多的内容，更符合人们的阅读习惯。采用这种方案的网站有：




腾讯 ---- 移动端首页主要是新闻内容，需要更好的阅读体验，适合直接使用px进行布局。


知乎 ---- 知乎也是比较典型的追求阅读体验的场景，不出意外的也是直接使用px。


点评 ---- 视觉元素较丰富，依旧采用了px方案，页面基本是flex布局，适配效果很好


淘宝 ---- 淘宝移动端的适配方案和rem/vw的方案其实是差不多的，元素的样式都是通过js生成的，虽然单位确实是px，但是方案依旧是以375px宽度的尺寸为基准进行缩放的。


2、rem方案
rem方案主要分为两种：
一种是缩放viewport的方案，如当年的lib-flexible,可以对1px border等细节问题较方便的处理，但会影响到media query。
另一种就是不缩放viewport，对1px boder等问题单独引入处理方案。然后对于基准尺寸下的html元素fong-size也有很多不同的定义方式

以下说明的rem与px的对应关系都是在屏幕宽度为375px的情况下

(1) 不缩放viewpor
马蜂窝 ---- 1rem = 37.5px

小米  ---- 1rem = 52.0833px

小红书 ---- 1rem = 50px

微博  ---- 1rem = 16px 稍微说明下 微博的font-size是根据media query来生成的


（2）缩放viewport

点评 ----1rem = 100px

B站 ---- 主站 1rem = 46.875px

搜狐  ---- 1rem = 75px

3、vw方案
（1）京东
   京东的移动端首页采用了vw+rem的布局方式，元素布局上依然使用rem单位，没有缩放viewport, html元素的font-size则使用vw + px fallback的形式，并且使用media query来限制布局宽度，如下图所示

边界情况下


（2）网易
   网易的方案和京东基本相同，没有缩放viewport，使用media query，只处理html元素的font-size，并限制布局宽度


（3）饿了么
   饿了么也是采用的vw+rem的方案，不过对viewport进行了缩放，也没有限制布局宽度，html元素的font-size依然由px指定，但是具体元素的布局上使用vw + px fallbak的形式，如下图所示：


可以看到，使用上述两种vw+rem的方案对现有的rem方案的改动都不会很大，都采用了vw + fallback的方式，兼容性问题得到了保证，只是饿了么的方案可能更需要构建过程中的插件支持。

点击查看更多精彩前端资源

点击有惊喜

一、关于vw与rem方案中的一些思考     并不是所有场景下的移动端页面都适合采用vw或rem的方案，这类方案的本质是布局等比例的缩放，让页面在不同尺寸的屏幕下有类似于矢量图片缩放的效果，即保证页面各元素之间位置尺寸的比例关系，并让元素可以清晰地展现。这样的方案更适合于视觉组件种类较多，视觉设计对元素位置的相对关系依赖较强的移动端页面。其实大部分页面都可以使用rem或vw的方案进行适配，但对于文本内容较多，或者说希望引导用户沉浸浏览的页面，我个人并不推荐使用等比缩放的方案，至少并不推荐完全使用等比缩放的方案，对于文本内容还是应该直接使用px这种绝对长度单位，毕竟在大屏手机上用户希望看到的是更多的内容而不是更大的内容。实际上很多这类的网站也确实是直接使用px结合flex等布局方式进行移动端适配的。


二、现有生产环境中移动端适配方案的一点总结

1、px方案
就像开篇提到的，并不是说移动端就一定要使用相对长度单位，传统的响应式布局依然是很好的选择，尤其在新闻，社区等可阅读内容较多的场景直接使用px单位可以营造更好地体验。px方案可以让大屏幕手机展示出更多的内容，更符合人们的阅读习惯。采用这种方案的网站有：




腾讯 ---- 移动端首页主要是新闻内容，需要更好的阅读体验，适合直接使用px进行布局。


知乎 ---- 知乎也是比较典型的追求阅读体验的场景，不出意外的也是直接使用px。


点评 ---- 视觉元素较丰富，依旧采用了px方案，页面基本是flex布局，适配效果很好


淘宝 ---- 淘宝移动端的适配方案和rem/vw的方案其实是差不多的，元素的样式都是通过js生成的，虽然单位确实是px，但是方案依旧是以375px宽度的尺寸为基准进行缩放的。


2、rem方案
rem方案主要分为两种：
一种是缩放viewport的方案，如当年的lib-flexible,可以对1px border等细节问题较方便的处理，但会影响到media query。
另一种就是不缩放viewport，对1px boder等问题单独引入处理方案。然后对于基准尺寸下的html元素fong-size也有很多不同的定义方式

以下说明的rem与px的对应关系都是在屏幕宽度为375px的情况下

(1) 不缩放viewpor
马蜂窝 ---- 1rem = 37.5px

小米  ---- 1rem = 52.0833px

小红书 ---- 1rem = 50px

微博  ---- 1rem = 16px 稍微说明下 微博的font-size是根据media query来生成的


（2）缩放viewport

点评 ----1rem = 100px

B站 ---- 主站 1rem = 46.875px

搜狐  ---- 1rem = 75px

3、vw方案
（1）京东
   京东的移动端首页采用了vw+rem的布局方式，元素布局上依然使用rem单位，没有缩放viewport, html元素的font-size则使用vw + px fallback的形式，并且使用media query来限制布局宽度，如下图所示

边界情况下


（2）网易
   网易的方案和京东基本相同，没有缩放viewport，使用media query，只处理html元素的font-size，并限制布局宽度


（3）饿了么
   饿了么也是采用的vw+rem的方案，不过对viewport进行了缩放，也没有限制布局宽度，html元素的font-size依然由px指定，但是具体元素的布局上使用vw + px fallbak的形式，如下图所示：


可以看到，使用上述两种vw+rem的方案对现有的rem方案的改动都不会很大，都采用了vw + fallback的方式，兼容性问题得到了保证，只是饿了么的方案可能更需要构建过程中的插件支持。

点击查看更多精彩前端资源

点击有惊喜