rem 布局方案
1.根据屏幕大小比例灵活改变web根元素的fontSize值,再加上使用rem单位。实现了web页面在设备显示上的自适应。
// 该段脚本实现pc端web页面自适应
$(document).ready(function(){
//引入jquery后,待文档全部加载完全后,运行的脚本。
var win_width = $(window).width(); //浏览器时下窗口可视区域宽度
var rem = (win_width*23/2000); //该比例要和设计稿比例同一
$('html').css('fontSize',rem+'px'); //网页根元素的fontSize是实现自适应的根本元素
console.log(rem);
$(window).resize(function() {
//当浏览器窗口大小发生变化时,重复执行上面的逻辑。代码如下
var win_width = $(window).width(); //浏览器时下窗口可视区域宽度
var rem = (win_width*23) /2000;
$('html').css('fontSize',rem+'px');
console.log(rem);
});
- 使用rem单元,按照设计稿比例,给网页各模块元素定宽高。包括字体大小,各种间距。
- rem布局方案,适用于pc端和移动端适配功能。