该博客探讨了如何利用rem单位解决不同手机屏幕尺寸导致的显示问题，以实现多终端自适应。通过设置meta标签，确保视口缩放比例，并通过JavaScript动态调整html元素的字体大小，以根据窗口宽度保持布局比例。示例代码展示了如何在CSS和JavaScript中使用rem，并处理了Firefox的兼容性问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"/> <!--请不要少了这句话-->
<style>
body{
margin:0rem;
font-size:0.3rem; /*谷歌浏览器 input元素 不继承 body的fontsize*/
} /*最后将所有px 改为rem*/
input{border-width:0.01rem;padding:0rem;font-size:inherit;} /*为了调节input元素的兼容性问题强行设置了input元素border的width和padding ；同时谷歌浏览器input元素的font-size不会继承父级 需要强行设置 inherit */ /*这些rem 都是 算好量好设计图的每个元素必要的属性的px值 除以100改的*/
.s_div_First{
background-color:#C8000A;
height:1.25rem;
line-height:1.25rem; /* 后面小括号里面那句话 适用 各个元素内部 单独设置fontsize ：(用rem 垂直居中的时候 line-height大约是height的一半上下浮动0.7左右) */ /*如果font-size属性 仅
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"/> <!--请不要少了这句话-->
<style>
body{
margin:0rem;
font-size:0.3rem; /*谷歌浏览器 input元素 不继承 body的fontsize*/
} /*最后将所有px 改为rem*/
input{border-width:0.01rem;padding:0rem;font-size:inherit;} /*为了调节input元素的兼容性问题强行设置了input元素border的width和padding ；同时谷歌浏览器input元素的font-size不会继承父级 需要强行设置 inherit */ /*这些rem 都是 算好量好设计图的每个元素必要的属性的px值 除以100改的*/
.s_div_First{
background-color:#C8000A;
height:1.25rem;
line-height:1.25rem; /* 后面小括号里面那句话 适用 各个元素内部 单独设置fontsize ：(用rem 垂直居中的时候 line-height大约是height的一半上下浮动0.7左右) */ /*如果font-size属性 仅
最低0.47元/天 解锁文章
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
