怎么解决移动端响应式布局问题

已于 2022-03-19 12:12:03 修改
阅读量424 收藏
点赞数
分类专栏： 布局与事件 HTML-CSS 文章标签： html5 css javascript css3 前端
于 2021-08-17 17:47:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44644385/article/details/119761485
版权

为达到这种布局，且是响应式（即随着移动端的变化，元素大小也相应变化）。

有以下四种方法： 

  1. flex 布局(flex:25%) 
    <!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>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }
        li {
            height: 60px;
            margin: 20px 0;
            flex: 25%;
        }
        div {
            width: 60px;
            height: 60px;
            margin: 0 auto;
            background-color: pink;
            border-radius: 20px;
        }
        
    </style>
</head>
<body>
    <ul>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
    </ul>
</body>
</html>
  2. rem + 媒体查询（根据查询设备大小，来相应改变html: font-size ==> 随后，其他标签里的样式用rem 做单位）
<!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>
        /* 假设UI稿的尺寸是750px，此时每个元素的大小是120px*120px
           750 / 10 == 75px  ：把屏幕分成10等分，120里面有多少个10等分
           120/ 75 => 此时元素的尺寸
        */
        * {
            margin: 0;
            padding: 0;
        }

        /*媒体查询*/
        /*当页面大于1200px 时，大屏幕，主要是PC 端*/
        @media (min-width: 1200px) {
            html {
                font-size: 120px;
            }
        }

        /*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
        @media (min-width: 992px) and (max-width: 1199px) {
            html {
                font-size: 90px;
            }
        }

        /*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
        @media (min-width: 768px) and (max-width: 991px) {
            html {
                font-size: 75px;
            }
        }

        /*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
        @media (min-width: 480px) and (max-width: 767px) {
            html {
                font-size: 48px;
            }
        }

        /*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
        @media (max-width: 479px) {
            html {
                font-size: 48px;
            }
        }

        ul {
            list-style: none;
        }

        li {
            width: 25%;
            height:  1.6rem;
            float: left;
            margin: 0.53rem 0;
        }

        div {
            width:  1.6rem;
            height:  1.6rem;
            margin: 0 auto;
            background-color: blueviolet;
            border-radius: 0.53rem;

        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
    </ul>
</body>

</html>

 3.rem+flexible.js

这里假如ui稿为750px ,盒子大小为120px

750/10 = 120 / x         x设置为rem,那么当750 变化时（响应式），这里用到html 的font-size ,flexible.js就是自动获取视口宽度，并且/10

所以公式变为: (视口宽度/ 10)(html 的font-size) * x = 120盒子要自适应的宽度

逻辑是这样 

<!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>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
    <style>
        /* 假设UI稿的尺寸是750px，此时每个元素的大小是120px*120px
           750 / 10 == 75px  ：把屏幕分成10等分
           这里:
                750px == 10rem
                75px == 1rem
           750 / 10 == 75px == 10rem/10 == 1rem 
           750  == 10 rem 
           那120 有多少rem
           750 / 10 == 120 / x
           x == 120 / 75
           其实就是看占的比例，比例是一直不会变的
           flexible.html 里会去获取屏幕宽度，然后设置html font-size ：屏幕宽度/10 == 1 rem
           这样无论屏幕宽度是多少，都会划分成10 等分，然后乘以比例就是他应该自适应的宽度
        */
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        li {
            width: 25%;
            height:  1.6rem;
            float: left;
            margin: 0.53rem 0;
        }

        div {
            width:  1.6rem;
            height:  1.6rem;
            margin: 0 auto;
            background-color: blueviolet;
            border-radius: 0.53rem;

        }
    </style>
</head>

<body>
    
    <ul>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
    </ul>
    
</body>

</html>

 4.rem + vw

<!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>
        /* 假设UI稿的尺寸是750px，此时每个元素的大小是120px*120px
           750 / 10 == 75px  ：把屏幕分成10等分，120里面有多少个10等分
           120/ 75 => 此时元素的尺寸

           750 / 10 == 120 / x
           x = 占ui稿的比例
           假设x 为 20
           20rem * 10vw == 它应该自适应的屏幕宽度
        */
        * {
            margin: 0;
            padding: 0;
        }
        html {
            /* 100vw 就是屏幕宽度，这里html:font-size:10vw 就是将屏幕分成10 等分 */
            /* 这里也是 屏幕宽度 / 10 */
            font-size: 10vw;
        }
        ul {
            list-style: none;
        }

        li {
            width: 25%;

            height:  1.6rem;
            float: left;
            margin: 0.53rem 0;
        }

        div {
            width:  1.6rem;
            height:  1.6rem;
            margin: 0 auto;
            background-color: blueviolet;
            border-radius: 0.53rem;

        }
    </style>
</head>

<body>
    
    <ul>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
    </ul>
    <script>

    </script>
</body>

</html>

日晞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于REM的移动端响应式适配方案（未完待续）
人生代码 ---- 公众号
03-23 412
视口 在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。 关于这篇文章说到的所有知识，本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, ...
基于REM的移动端响应式适配方案
weixin_30615767的博客
07-06 97
视口 在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。 关于这篇文章说到的所有知识，本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, ...
移动端布局-响应式布局常用解决方案
qq_62415996的博客
01-17 795
前言：前端开发常用的自适应方法如下： Px和视口，媒体查询，百分比，自适应场景下的rem解决方案 ，通过Vw/Vh来实现自适应。介绍一些移动端开发技巧以及css3新单位，适合于混合响应式布局
移动端响应式处理
u013934392的博客
08-04 342
@media (max-width:360px){/* 兼容最大宽度360px */ /.list .userBox .num{display: none}/ } @media (min-width:375px){/* 兼容最小宽度375px */ /.list .tipBox{ left: 52%;}/ /.list .userBox .num {/ ...
移动端rem响应式解决方案
qq_21976063的博客
12-17 153
设置meta标签 <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"> 上述meta标签的每一个属性的详细介绍如下： 属性名 取值 描述 width 正整数 定义布局视口的宽度，单位...
移动端响应式布局解决方案JavaScriptREM
08-10
移动端响应式布局解决方案、用 JavaScript 根据屏幕宽度计算 Root 字体大小弥补媒体查询断点断层过大问题，元素单位使用 REM 即可基于 Root 字体大小来改变自身大小。
吃透移动端 Html5 响应式布局
01-21
那么下面我们来聊聊移动端响应式布局，了解他的来龙去脉，对现有的最佳解决方案探索。 问题 全文将围绕下面几个问题进行论述和展开： 写移动端H5 相关页面，相比 PC 端有哪些值得注意的点？ 关于H5 响应式布局有哪些...
谈一谈bootstrap响应式布局
01-19
这时候了解响应式布局就很有必要，响应式布局就是为解决多终端问题而生的。本次介绍的是轻量级、开源的、免费的bootstrap。 搭建开发环境 首先下载官网的boostrap源码包：http://www.bootcss.com/. 开发简单的项目...
网站模板-产品服务解决方案响应式网页模板-适配移动端界面-HTML源码.zip
03-23
响应式设计 — 采用最新响应式网页设计技术，确保网站在各种屏幕尺寸和设备上均提供无缝浏览体验，无论用户使用桌面电脑、平板还是智能手机。 现代化UI/UX — 遵循现代网页设计和用户体验原则，这份源码利用干净的...
行业工厂解决方案响应式网页模板-适配移动端-HTML源码.zip
最新发布
03-27
这份资源的专业性不仅体现在其高效的响应式设计上，还体现在其丰富的功能和易用性上。它支持多种流行的前端框架和库，如Bootstrap、jQuery等，使得开发过程更加高效、灵活。此外，它还提供了丰富的页面模板和组件，...
移动端页面（响应式）
weixin_34399060的博客
08-14 165
手机端页面的做法 学会 media query 媒体查询 通过@media，判断设备类型，如pc/mobile/pad等设配，然后根据媒体查询的结果使用不同的css。一套html + 多套css pc端一套html+css/手机端一套html+css 不做响应式布局，pc端和手机端分别使用一个域名，做两个不同的网站 例如淘宝和京东。 淘宝pc端网址：www.taobao.com ...
普通网页怎么改成响应式布局
weixin_30369041的博客
02-20 316
1 – 布局 　　当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询（Media Queries）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。 　　当你已经完成了无响应的网站，做的第一件事是在你的HTML页面，粘贴下面...
移动端适配与响应式布局
weixin_30578677的博客
08-11 202
同样也是欠缺的知识之一。几片博文献上： 浅谈前端移动端页面开发（布局篇）：http://www.xiaoxiangzi.com/Programme/CSS/4298.html 移动端高清、多屏适配方案 总结个人使用过的移动端布局方法：http://www.techweb.com.cn/network/system/2017-07-24/2562966.shtml 手机端页面自适应解决方...
移动端适配及响应式开发
qq_42453238的博客
07-31 281
移动端适配的meta标签及其含义 <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"> 移动端适配流程 CSS的一些单位 1、em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em特点： em的值并不是固定的； em会继
移动Web
m0_73198722的博客
09-03 153
二维，三维，flex布局，移动端适配
Bootstrap禁用响应式布局
技术资料收集站
01-15 2972
Bootstrap这个前端框架，在前端界可是一款大名鼎鼎的框架，使用Bootstrap不需要很强的设计能力就能设计出很漂亮的网页，这几天在开发一个创业项目，PC端web就打算使用Bootstrap来进行开发，但是又想去掉Bootstrap的响应式效果，于是乎就在网上找了教程，发现了网上的教程的效果好像不太适用了新版本，于是自己摸索了下，跟大家来一起分享下去掉Bootstrap响应式的几个步骤：
如何完成响应式布局，有几种方法？看这个就够了
m0_62360527的博客
10-04 2063
如何完成响应式布局，有几种方法？看这个就够了
响应式设计和移动端优化：如何实现页面在不同设备上的适配和优化
baidu_38876334的博客
05-15 1516
响应式设计是一种使网页能够自适应不同设备和屏幕尺寸的设计方法。它通过使用流式网格布局、媒体查询和弹性图片等技术，使得网页能够在不同分辨率和设备上呈现出最佳的布局和用户体验。移动端优化则是针对移动设备进行的性能优化和用户体验改进。由于移动设备的资源有限和网络环境的不稳定性，移动端优化需要关注页面加载速度、交互流畅性和内容可访问性等方面的问题。
vue移动端兼容性问题
08-18
Vue 在移动端的兼容性问题主要体现在以下几个方面： 1. 响应式布局：移动设备的屏幕尺寸各异，需要使用响应式布局来适配不同的屏幕尺寸。可以使用 Vue 的动态绑定和条件渲染来根据屏幕尺寸调整布局。 2. 手势事件：移动设备上常用的手势事件如滑动、缩放等在 PC 端可能不支持或表现不一致。可以使用第三方库如 Hammer.js 来处理手势事件。 3. 移动端浏览器兼容性：不同的移动端浏览器对于 CSS 属性和 JavaScript API 的支持程度有差异，可能会导致页面显示异常或功能失效。可以通过使用 CSS 前缀、检测浏览器特性支持情况或者使用兼容性库如 autoprefixer 来解决。 4. 性能优化：移动设备的性能相对较低，需要注意优化 Vue 页面的性能。可以使用异步组件、懒加载、缓存等技术来提升页面加载速度和性能表现。 总之，在开发移动端的 Vue 应用时，需要针对移动设备的特点进行适配和优化，以提供更好的用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值