移动端rem适配实现自适应（以下案例以750px为标准）

最新推荐文章于 2024-04-22 11:34:50 发布
最新推荐文章于 2024-04-22 11:34:50 发布
阅读量1k 收藏 5
点赞数
分类专栏： 前端 文章标签： html5 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51423808/article/details/116462702
版权

移动端rem适配实现自适应（以下案例以750px为标准）

1.设置根元素大小，然后以rem为单位（root em），rem的基准是相对于html元素的字体大小 ，使用方法如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 50px;
        }
        
        div {
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

这里会生成一个100px*100px的盒子

2. 技术方案一：媒体查询@media+rem(苏宁首页案例)

媒体查询可以根据不同屏幕尺寸设置不同样式:使用规范[https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media]

3.案例：苏宁首页

文件夹创建创建规范

这里用媒体查询设置常见屏幕尺寸下的根元素字体大小命名为common.css

html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }
}

设置首页样式命名为index.css


a {
  text-decoration: none;
}
body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background-color: #f2f2f2;
}
.search-content {
  display: flex;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15rem;
  height: 1.76rem;
  background-color: #ffc001;
}
.search-content .classify {
  width: 0.88rem;
  height: 1.4rem;
  background: url(../image/classify.png) no-repeat;
  background-size: 0.88rem 1.4rem;
  margin: 0.22rem 0.5rem 0.14rem 0.48rem;
}
.search-content .search {
  flex: 1;
}
.search-content .search input {
  outline: none;
  width: 100%;
  border: 0;
  height: 1.32rem;
  border-radius: 0.66rem;
  margin-top: 0.24rem;
  font-size: 0.5rem;
  padding-left: 1.1rem;
  color: #757575;
}
.search-content .login {
  width: 1.5rem;
  height: 1.4rem;
  margin: 0.2rem;
  font-size: 0.5rem;
  text-align: center;
  color: #fff;
  line-height: 1.4rem;
}
.banner {
  width: 15rem;
  height: 7.36rem;
}
.banner img {
  width: 100%;
  height: 100%;
}
.ad {
  display: flex;
}
.ad a {
  flex: 1;
}
.ad a img {
  width: 100%;
}
nav {
  width: 15rem;
}
nav a {
  float: left;
  width: 3rem;
  height: 2.8rem;
  text-align: center;
}
nav a img {
  display: block;
  width: 1.64rem;
  height: 1.64rem;
  margin: 0.2rem auto 0;
}
nav span {
  font-size: 0.5rem;
  color: #333;
}

首页框架index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <!-- 顶部搜索框 -->
    <div class="search-content">
        <a href="javarsctipt:" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search">
            </form>
        </div>
        <a href="javrscript:" class="login">登录</a>
    </div>
    <!-- banner部分 -->
    <div class="banner">
        <img src="./upload/banner.gif" alt="">
    </div>
    <!-- 广告部分 -->
    <div class="ad">
        <a href="javascript:;"><img src="./upload/ad1.gif" alt=""></a>
        <a href="javascript:;"><img src="./upload/ad2.gif" alt=""></a>
        <a href="javascript:;"><img src="./upload/ad3.gif" alt=""></a>
    </div>
    <!-- nav部分 -->
    <nav>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="./upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
    </nav>
    //图片素材自己去官网爬欧
</body>

</html>

效果如图可根据屏幕大小自己改变图片及字体大小

技术方案二：flexible.js+rem

flexible.js下载地址【https://github.com/amfe/lib-flexible】
解压到当前文件
选用index.js

文件创建如下文件夹创建

设置视口标签以及引入初始化样式还有js文件

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入我们的flexible.js 文件 -->
    <script src="js/flexible.js"></script>

这里代码只演示了收缩栏，剩余部分和上面的一样，自行补充

代码如下

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入我们的flexible.js 文件 -->
    <script src="js/flexible.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" value="月薪过万">
            </form>
        </div>
        <a href="#" class="login">登录</a>
    </div>
</body>

</html>

index.css

body {
    min-width: 320px;
    max-width: 750px;
    /* flexible 给我们划分了 10 等份 */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}

a {
    text-decoration: none;
    font-size: .333333rem;
}


/* 
img {
    width: 5.125rem;
    height: 4rem;
    width: 1rem;
    width: 1.093333rem;
    height: 1rem;
} */


/* 如果我们的屏幕超过了 750px  那么我们就按照 750设计稿来走 不会让我们页面超过750px */

@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}


/* search-content */

.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    height: 1.173333rem;
    background-color: #FFC001;
}

.classify {
    width: .586667rem;
    height: .933333rem;
    margin: .146667rem .333333rem .133333rem;
    background: url(../images/classify.png) no-repeat;
    background-size: .586667rem .933333rem;
}

.search {
    flex: 1;
}

.search input {
    outline: none;
    border: 0;
    width: 100%;
    height: .88rem;
    font-size: .333333rem;
    background-color: #FFF2CC;
    margin-top: .133333rem;
    border-radius: .44rem;
    color: #757575;
    padding-left: .733333rem;
}

.login {
    width: 1rem;
    height: .933333rem;
    margin: .133333rem;
    color: #fff;
    text-align: center;
    line-height: .933333rem;
    font-size: .333333rem;
}

实现效果如图：

动态变化图片和字体

李夏梨
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
postcss-pxtorem移动端适配的实现
01-19
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下，... rootValue: 32,//结果为：设计稿元素尺寸/32(一般750px的设计稿的根元素大小设置32)，比如
上传文件报413 Request Entity Too Large错误解决办法
DN金猿的博客
12-15 762
修改nginx.conf的值就可以解决了 将以下代码粘贴到nginx.conf内 client_max_body_size 20M; 可以选择在http{ }中设置：client_max_body_size 20m; 也可以选择在server{ }中设置：client_max_body_size 20m; 还可以选择在location{ }中设置：client_max_body_size 20m; 三者有区别 设置到http{}内，控制全局nginx所有请求报文大小 设置到server{}内，控制该
vue移动端自适应，设计稿750，适配 px2rem
helal的博客
03-18 2143
我的设计稿是750的，量出的宽高多少就是多少，单位为px，浏览器自动转换成rem。 1、安装：npm i postcss-px2rem --save -dev 2、安装：npm i postcss-plugin-px2rem --save 安装以上两个插件了，package.json,就会多出这两个 3、接下来就是配置了，先配置vue.config.js文件，rootValue:75，是设计稿为750，加上以下代码 plugins: [ require('postcss-plug.
web移动端适配有哪些解决方案？每个方案的优缺点评估
前端开发博客
02-21 1159
通过在页面上使用rem单位来控制页面元素的大小，实现在不同尺寸的设备上保持界面展示效果的一致性。这种方案的优点在于简单易用，但缺点是对安卓的适配性可能不够好。
设计稿750px移动端字体自适应，1rem=100px
cheeso的博客
10-30 1万+
script type="text/javascript"> //JS监听浏览器文字大小代码 "use strict"; (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orient
移动端页面自适应布局（rem布局）
le__seul的博客
07-08 508
根据设计稿宽度750px，如何布局自适应各移动端设备？ 1、首先自定义一个font-size：16px；此时有 1rem = 16px；可以用font-size去定义最小单位，使用rem单位计算宽度/高度。 根据设计稿去计算布局，此时的rem单位只能适配宽度像素为750px的设备，不具备适应各种移动端设备。 2、根据css3自适应布局单位vw 已知：100vw = 100% （视口宽度）； 100vh = 100% (视口高度) 对于不同设备可视视口比例大小不同，但是vw总能代表该视口宽度比例 以设计稿75
手机html根据手机分辨率网页文字大小自适应
热门推荐
djl的专栏，blog.djl.cx好记
05-27 2万+
问题：不同手机型号屏幕尺寸大不相同，导致同样的文字，有的显示一行，有的显示多行。通过查资料和自己的尝试解决；网页开发习惯的px单位，手机html开发不适用。源代码如下：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!--防止手机页面缩放--&gt;
微信小程序：适配手机屏幕宽高度的设置方法
weixin_40807080的博客
11-06 1万+
我们在做小程序页面时常常会需要设置背景，而不同手机的屏幕宽高度并不一样，虽然设置宽度为750rpx来解决宽度自适应的问题，但高度却没有这种方法，下面来简单介绍一下设置高度自适应的方法： 一、750rpx自适应宽度 rpx是小程序自带的衡量尺寸，可以根据屏幕宽度进行自适应，750rpx则设定为手机页面宽度。而不同的手机屏幕大小750rpx对应的px不同，如iphone6的宽度是375px，在ipho...
移动端适配问题的理解
qq_45219069的博客
12-07 616
最近无意间再次接触了适配问题，虽然之前也一直在使用诸如rem类的方案，也研究过引入的适配代码，突然让自己说出其中原委，却模棱两可，真是尴了个大尬，说到底还是没有彻底弄清除。 1、网络求助 自己没弄懂，就只有寻求网络，但是查找了许多博客、笔记好像都写的有点不清晰，很多上来就是 1rem = 100px，看得我也是一头雾水，最后找到一篇文章，按照其理解貌似懂了。原文链接 2、rem适配原理 首先要知道rem是一个相对单位，相对于根节点大小来的，假设根节点大小为 50px，则1rem = 50px，2rem =
【H5移动端】前端H5移动端的单位适配方案集，包括给你用例子讲明白什么是1像素的问题（不定期补充~）
庞囧的博客
04-10 4024
首先要知道。
安卓html 750px,移动端750px页面适配
weixin_42364855的博客
06-19 1566
有段时间没写移动端的页面了，这次写到了就顺便来记录一下基本用法，简单的说下750px设计图的移动端适配问题首先，引入common.js文件(function(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',rec...
vue使用rem实现 移动端屏幕适配
12-01
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了 如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：...
flexible.js实现移动端rem适配方案
10-15
主要介绍了flexible.js实现移动端rem适配方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
移动端rem开发自适应js写法
08-10
移动端rem开发自适应js写法
HTML5 表单新增的属性
yuxingwu9872的博客
04-17 613
HTML5新的input类型(目前IE都不支持,Opera和Chrome对新的输入类型的支持最好,即使不被支持,仍然可以显示为常规的文本域。step number 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)step number 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)off(也可写成wrap)：不换行，当输入的内容超出文本区域右边界时，文本将向左滚动，并显示滚动条。soft 当在表单中提交时,textarea 中的文本不换行。
五个关于CSS3的常见面试题
qq_42431718的博客
04-19 484
答案：CSS3中的字体图标是一种使用字体文件来显示图标的方法，通常使用特定的字体图标库（如Font Awesome、Material Icons等）。答案：CSS3中的渐变是一种可以在元素背景、边框或文本中创建平滑过渡效果的技术。答案：CSS3中的过渡是一种可以在元素的属性值发生变化时平滑过渡的技术。答案：CSS3中的网格布局是一种用于二维布局的强大的布局系统，通过将容器划分为行和列的网格来控制元素的布局。答案：CSS3中的伪类是用来选择元素的特定状态或位置的选择器，通常以冒号（:）开头。
CSS3新增特性（一）
最新发布
m0_48670609的博客
04-22 1082
CSS3新增内容，包括CSS3新增选择器：子级选择器、兄弟选择器、结构伪类选择器、伪元素选择器、属性选择器；CSS3盒模型；CSS3新增属性：边框圆角、文字阴影、盒子阴影、过渡属性。
伪选择器和伪元素选择器
qq_41807399的博客
04-19 391
用来添加一些选择器的特殊效果a:hover：鼠标滑过链接a:link：未访问链接a:visited:以访问链接a:active：已选中链接:nth-child(n)：选择所有冒号前元素的父元素的第二个子元素。
五个关于CSS3的常见面试题及其答案
qq_42431718的博客
04-19 636
它包括四个部分：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。答案：响应式设计是一种网页设计方法，可以使网站在不同设备上（如桌面、平板、手机等）以及不同屏幕尺寸上呈现出最佳的布局和用户体验。答案：CSS3中常见的选择器包括：元素选择器、ID选择器、类选择器、后代选择器、子元素选择器、相邻兄弟选择器、通用选择器、属性选择器、伪类选择器和伪元素选择器等。答案：Flexbox是一种用于布局设计的CSS3模块，它提供了一种更加灵活的方式来排列、对齐和分布元素。
postcss-pxtorem移动端适配
08-12
对于移动端适配，postcss-pxtorem是一个很好的工具。它可以帮助我们将设计稿中的像素单位转换为rem单位，实现移动端的自适应布局。 首先，你需要在项目中安装postcss-pxtorem插件。可以使用npm或者yarn来进行安装： ``` npm install postcss-pxtorem --save-dev ``` 然后，在项目的根目录下创建一个postcss.config.js文件，并配置postcss-pxtorem插件： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // 设计稿宽度除以10，比如设计稿宽度是375px，则rootValue为37.5 propList: ['*'], selectorBlackList: ['html'], // 不转换html元素的rem单位 }, }, }; ``` 接下来，在你的css文件中使用像素单位进行编写，插件会自动将其转换为rem单位。例如： ```css .selector { font-size: 14px; margin: 10px; } ``` 最后，在构建工具中配置postcss-loader来应用postcss插件，比如在webpack中的配置： ```javascript module.exports = { // ... module: { rules: [ // ... { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', ], }, ], }, // ... }; ``` 这样就完成了移动端适配的配置。当页面加载时，插件会根据设备的宽度计算出rem单位的值，并将样式应用到对应的元素上，实现移动端自适应布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值