网页适配（移动端网页布局方案）-CSDN博客

本文链接：https://blog.csdn.net/2401_84341495/article/details/139702611

一、rem方案

方式一：

跟pc端网页平滑自适应一样，通过js控制html字体大小，实现移动端的页面自适应布局。使用这种布局方式

需要在头部设置：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

也就意味着使用”理想视口 ” 进行布局;

方式二：

media+rem 如果通过媒体查询做移动端开发，需要把主流的屏幕大小适配出来，例：

@media screen and (min-width:350px){ 
	html{font-size:342%;} 
}
@media screen and (min-width:360px){ 
	html{font-size:351.56%;} 
}

字体的百分比计算逻辑：

依据设计稿的尺寸进行推导！

例如：

设计稿宽：750px, 设计稿字体尺寸：16px 假定1rem = 100px，字体尺寸： 1 / 16 * 100 = 625%; (1px对应的rem大小，最后*100) 当屏幕尺寸为640px时，字体大小是：625% * （640 / 750）= 533.3333%; 当屏幕尺寸为375px时，字体大小是：625% * （375 / 750）= 312.5%;

二、flexible.js 方案（手淘方案）

flexible.js方案是手淘(手机淘宝)开源的一个做移动端适配的方案,此方案的主体思路跟rem方案类似，但是也有区别；类似：都是通过设置font-size来进行适配区别：rem方案是通过”理想视口 ”(不考虑dpr)的方式进行适配，而flexible方案是考虑dpr，然后配合页面缩放(initial-scale)完成适配;

flexible.js 详解

flexible方案是以iPhone6 为基稿进行的设计，大家可以理解成flexble默认以750宽（因为iphon6的物理分辨率是750*1334）的设计稿为基础进行的设计。他的设计思想是把设计稿分成十份，1rem = 1份；所以默认html的font-size =75px; 所以如果你在使用flexible设计移动端适配时，如果你的设计稿是750，那么px与rem的转换比例就是75，如果你的设计稿是640，那么px与rem的转换比例是64。 Flexible适配考虑了iphone dpr为1,2,3的情况，对于安卓来说，他统一的设置dpr为1，所以对于安卓的高清适配flexible不是很完美。