rem自適應佈局
監聽瀏覽器,針對不同解析度計算font-size
//方法一
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
/*720為設計稿大小*/
docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
//方法二
var bli = 100 / 750;
var FontSize = function(){
if($(window).width() <= 750){
$('html').css({
'font-size': $(window).width() * bli
});
}else{
$('html').css({
'font-size': '100px'
});
}
};
FontSize();
$(window).resize(function(){
FontSize();
});
只需在js中新增如上一段程式碼,然後結果就是 100px = 1rem; 之後就可以使用rem實現自適應佈局。
注意要在HTML頁面頂部新增如下 meta 標籤:
<meta charset="UTF-8">
<!-- 根據瀏覽器的螢幕大小自適應的展現合適的效果 -->
<meta name="applicable-device" content="pc,mobile" />
<!-- 移動端 瀏覽器中頁面將以原始大小顯示,不允許縮放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover" />
<!--自動選擇更好的瀏覽器-->
<meta name="renderer" content="webkit">
相關文章
- rem 適配佈局REM
- CSS佈局 --- 自適應佈局CSS
- css自適應佈局CSS
- 三欄佈局之自適應佈局
- 三列自適應佈局(聖盃佈局)
- 移動端適配-Rem 佈局篇REM
- 我的前端自學之路2020/12/31 rem適配佈局前端REM
- rem佈局REM
- 如何實現兩欄佈局,右側自適應?三欄佈局中間自適應呢?
- 兩列自適應佈局方案整理
- 三列寬度自適應佈局
- Web自適應佈局那些事兒Web
- display:table-cell自適應佈局
- QT Creator/QT Designer佈局自適應QT
- easyui-layout佈局高度自適應UI
- rem佈局解析REM
- vue前端自適應佈局,一步到位所有自適應Vue前端
- 兩列居中寬度自適應佈局
- 前端響應式佈局基礎——rem前端REM
- 移動端第十八章 rem適配佈局REM
- H5 - rem自適應方案H5REM
- 一列居中寬度自適應佈局
- 學習筆記:自適應佈局,多螢幕適配筆記
- 移動端web自適應適配佈局解決方案Web
- 利用vw+rem實現移動web適配佈局REMWeb
- 適配手機頁面佈局的動態rem方案REM
- rem自適應解決方案·px2rem-loader&hotcssREMCSS
- css佈局,左右固定中間自適應實現CSS
- flex佈局兩邊固定寬 中間自適應Flex
- 2020-12-17 html、css面試題3: 水平垂直居中,左右固定中間自適應 三欄佈局,靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局,IE中常見的相容性問題,清空陣列的方法HTMLCSS面試題陣列
- web移動佈局所需:remWebREM
- 關於rem佈局問題REM
- 【CSS】三欄/兩欄寬高自適應佈局大全CSS
- lib-flexible 實現移動端自適應佈局Flex
- 網頁佈局自適應的另一種解決方案網頁
- CSS Grid 網格佈局實現自適應9宮格CSS
- css--常見左右盒子寬度高度自適應佈局CSS
- rem佈局原理和優缺點REM
- Vue專案rem佈局設定VueREM