h5.md

h5

rem适配方案

手淘H5页面的终端适配

VW: 是时候放弃REM布局了

可爱的rem

了解真实的『REM』手机屏幕适配

场景

设计开发情况1: 
  设计稿: 基于x1(px)宽的稿 
  css: y1(rem) = x1 宽，即满屏宽
  即：y1*font-size1 = x1
  先根据设计稿固定得到font-size1: font-size1 = x1 / y1


要使得目标情况2: 
  不同分辨率下: 如x2(px)宽的屏   
  css: y1(rem) 同样也等于满屏
  即：y1*font-size2 = x2
  得到: font-size2 = x2 / y1


即: css写固定的rem数值，在不同分辨率下都是相同的屏幕宽度比。

方案1

@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

方案3

rem2px: 1rem对应视觉稿多少px。 这里是100为例, 即设计稿100px对应css1rem。可以是任意值的系数比。

实际场景： 设计稿总宽700px(designWidth)中的元素10px 相当于=> 实际情况总宽window.innerWidth中的元素多少px  相当于=> css输入单位: 固定rem

window.innerWidth / designWidth 是px比例.

输入的css单位：xrem

设计稿总宽度 / 设计稿元素 = window.innerWidth / (x * fontSize) 
=>
(x * fontSize) / 设计稿元素 = window.innerWidth / 设计稿总宽度
=> 
fontSize = ( window.innerWidth / 设计稿总宽度 * 设计稿元素 ) / x
=>
当设计稿元素 = 100px时，应该是对应的应该输入1rem 也就是计算的 fontSize
=>
window.innerWidth / designWidth * 100 = 1rem = fontSize值;
=>
fontsize = 1rem  = window.innerWidth / designWidth * 100 'px'
=>
fontsize / 100 = window.innerWidth / designWidth

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize =
  ((window.innerWidth / designWidth) * rem2px) + 'px';

需要已知:

1. designWidth: 设计稿总宽度
2. rem2px : (设计稿1rem对应多少px，也可以理解为设计稿下的font-size)

设计稿开发 : 宽300px  元素100px=》1rem  font-size:100px;

移动屏计算： 宽400px  元素1rem   => font-size

方案4

function adapt(designWidth, rem2px){
  var d = window.document.createElement('div');
  d.style.width = '1rem';
  d.style.display = "none";
  var head = window.document.getElementsByTagName('head')[0];
  head.appendChild(d);
  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
  d.remove();
  document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
  var st = document.createElement('style');
  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
  st.innerHTML = portrait + landscape;
  head.appendChild(st);
  return defaultFontSize
};
var defaultFontSize = adapt(640, 100);