H5移动端rem自适应方案

最新推荐文章于 2025-03-21 21:21:34 发布

西风XF

最新推荐文章于 2025-03-21 21:21:34 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： rem 移动端适配

本文链接：https://blog.youkuaiyun.com/qq_36242361/article/details/75442183

css 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了三种常见的移动端网页布局方案：固定基准值方案、利用flexible.js实现的rem布局方案及通过媒体查询设置不同屏幕宽度下的字体大小方案。文章详细解释了每种方案的具体实施步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

笔记：

具体物理像素、设备像素的意义和比值，地址：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

---------------------------------------------------------------------------

以UI图750为例。

第一种方案：（单位：px）固定基准值为2，就是固定除以2，宽度用flex布局或百分比布局。

需要写：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

例如：UI图上一个块元素为600px，css写的时候这个div的高度为300px;

第二种方案：（单位：rem）淘宝的flexible.js；（下载地址：https://github.com/amfe/lib-flexible/blob/master/src/flexible.js），css用less编译；

不需要写：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

在html里面引入flexible.js

按照实际的750的尺寸标注，UI图上一个块元素为600：

在less文件里，定义基准值：@size:75;

第三种方案：（单位：rem），媒体查询@media在不同的屏幕宽度下，设定不同的font-size：

需要写：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

例如：UI图上一个块元素为600px，css写的时候这个div的高度为 600/2(dpr基准值)/20(媒体查询比值);

html文件引入common.css

/*common.css*/

/*比值为1:20       1rem = 20px*/
@charset "utf-8";
body,ul,p,h1,h2,h3,dl,dt,dd,li,input,textarea,button{
  margin:0;
  padding:0;
  word-break:break-all;
}
body{
  text-align:left;
  font-family:'苹方',Helvetica,'微软雅黑',Arial,sans-serif;
  font-size-adjust:none;
  -webkit-text-size-adjust:none;
  color: #454545;
}
ul,li,dl,dt,dd{
  list-style:none;
}
a,a:visited{
  text-decoration:none;
  color:#666;
}
em,var{
  font-style: normal;
}
*{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
input[type='button'] {
  -webkit-appearance:none; /*去除input默认样式*/
}
::-webkit-input-placeholder { /* WebKit browsers */
  color:#aeaeae;
}
::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:#aeaeae;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:#aeaeae;
}
::-ms-input-placeholder { /* Internet Explorer 10+ */
  color:#aeaeae;
}
input{
  outline:none;
}
input[disabled="true"]{
  background-color:transparent;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
}
input,textarea,select{
  -webkit-appearance: none;
  background-color: #fff;
  border: none;
}
body {
  background-color: #F2F2F2;
  overflow-x:hidden;
}
html {
  font-size: 107%;
}
@media only screen and ( min-width: 320px) {
  html {
    font-size: 107%!important;
  }
}
@media only screen and ( min-width: 360px) {
  html {
    font-size: 120%!important;
  }
}
@media only screen and ( min-width: 375px) {
  html {
    font-size: 125%!important;
  }
}
@media only screen and ( min-width: 414px) {
  html {
    font-size: 138%!important;
  }
}
@media only screen and (min-width: 480px){
  html{
    font-size: 160%!important;
  }
}
@media only screen and (min-width: 540px){
  html{
    font-size: 180%!important;
  }
}
@media only screen and (min-width: 600px) {
  html {
    font-size: 200%;
  }
}
@media only screen and (min-width: 640px){
  html{
    font-size: 213%;
  }
}
@media only screen and (min-width: 720px) {
  html{
    font-size: 240%;
  }
}
html,body{
  height: 100%;
}
/*  全局隐藏CLASS */
.hide{display: none;}
.clearfix:after {
  clear:both;
  height:0;
  overflow:hidden;
  display:block;
  visibility:hidden;
  content:".";
}

----------------------------------------------------------------------------分割线----------------------------------------------------------------------------

以上，仅个人做笔记使用，若有错误请指正。