rem適配方案

①em大小是基於父元素的字型大小

②rem是相對單位，r是root的意思，在html頁面上就是html標籤，所以rem的大小是基於html元素的字型大小

①使用flex的伸縮布局、使用百分比的流式布局、使用**查詢的響應式布局，共同點就是元素只能做寬度的適配（除外)

②rem適配可以實現寬度和高度都能做到適配，相當於等比縮放

③適配基本思路：通過控制html上的字型大小去控制頁面上所有以rem為單位的基準值控制的尺寸

④換算公式：當前rem基準值 = 預設的基準值 / 設計稿寬度 * 當前裝置的寬度

①使用**查詢實現適配

<

header
>hello world
header
>

/*

假設的裝置320px 640px 
*/@media(min-width:320px)}
@media(min-width:640px)}
bodyheader

@charset "utf-8";

// 變數模組（定義變數）
@adapterdevicelist:750px,640px,540px,420px,320px;// 適配裝置
@psdwidth:750px;// 設計稿尺寸
@basefontsize:100px;// 預設基準值
@len:length(@adapterdevicelist);// 需要適配裝置的陣列長度
// 混入模組（進行適配）
.adaptermixin(@index) when ( @index > 0)}
.adaptermixin( @index - 1);
}// 適配模組(呼叫)
>rem適配
title
>
<
link 
rel="stylesheet"
type
="text/less"
href
="index.less"
>
<
script 
src="less.js"
>
script
>
<
style
>
header
style
>
head
>
<
body
>
<
header
>hello world
header
>
body
>
html
>

rem 適配方案

首先我們要明白，為什麼要用rem單位呢，常用的px不好嗎？原因是如果我們用px作為長度大小單位的話，就無法根據螢幕大小變化實時改變頁面元素的大小，反之，rem就可以做到實時適配。其次，我們也要清楚以rem為單位的元素大小是根據css html根標籤下的文字大小 fontsize 來改變的。在實際開發...

前端 rem適配方案

原理rem是相對長度單位，rem方案中的樣式設計為相對於根元素font size計算值的倍數。根據螢幕寬度設定html標籤的font size，在布局時使用rem單位布局，達到自適應的目的，是彈性布局的一種實現方式。實現過程 首先獲取文件根元素和裝置dpr，設定rem，在html文件載入和解析完成後...

rem手機端適配方案

1.頁面加入如下 function doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc...