关于如何用rem兼容不同手机屏幕大小不一致问题以达到多终端自适应问题

最新推荐文章于 2025-06-27 19:45:56 发布

原创

最新推荐文章于 2025-06-27 19:45:56 发布 · 5.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#手机

该博客探讨了如何利用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;