HTML-CSS（五十八）移动端适配方案

最新推荐文章于 2024-04-13 13:14:42 发布
最新推荐文章于 2024-04-13 13:14:42 发布
阅读量137 收藏
点赞数
分类专栏： HTML css3 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44730244/article/details/116561087
版权
HTML 同时被 3 个专栏收录
67 篇文章 2 订阅
订阅专栏
CSS
65 篇文章 3 订阅
订阅专栏
css3
30 篇文章 1 订阅
订阅专栏

1.百分比布局，也叫流式布局。代表网站：优酷、百度、天猫、腾讯。元素大小不会发生变化，适配改变的是元素之间的间距。窄设备间距小，宽设备间距大

2.等比缩放布局，也叫rem布局。代表网站：网易、爱奇艺、淘宝、美团。元素间距基本不会发生改变，适配改变的是元素的大小。窄设备元素小，宽设备元素大
在这里插入图片描述
流式布局原则
在这里插入图片描述
好处：大屏幕下显示更多的内容。

坏处：宽屏比例下会有一些不协调

流式布局练习：拉勾网移动端
在这里插入图片描述

每天进步一大步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端布局——移动适配
m0_45659764的博客
04-05 3832
什么叫移动适配？网页元素的宽高都要随着设备的宽度等比缩放 如何实现？ rem：目前多数企业再用的解决方案 vw/vh：未来的解决方案 一、rem 能够使用rem单位设置网页元素的尺寸 网页效果 屏幕宽度不同，网页尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应，高度固定 rem单位 相对单位 rem单位相对于HTML标签（根标签）的字号计算结果 1rem=1HTML字号大小 注意：使用re...
HTML移动端适配
许诺的博客
03-02 4044
1.手机端属于说明 ​ 物理像素：屏幕出厂就确定的 ​ css像素：；逻辑像素，css里面的px单位 ​ dpr设备像素比：物理像素/逻辑像素 ​ 理想视口的设置： <meta name="viewport" content="width=device-width， initial-scale=1.0"> 2.响应式 ​ 一套代码，能够适配多个平台，不论大小屏幕尺寸或者设备类型都能显示比较正常的效果 原理:利用媒体查询 @media 3.移动端适配 ​ 1.使用百分比。 ​ 2.使用r
超详细讲解 H5 移动端适配方案
weixin_62897746的博客
11-01 2180
在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。
h5应用如何适配移动端(干货总结)
最新发布
qq_48896417的博客
04-13 1495
H5应用的开发是前端必备技能,h5适配移动端也是业务常见的场景,如何进行必要的适配,今天做一个比较全面的总结。
HTML实现移动端布局与页面自适应
qq_44552416的博客
09-13 9466
结论：1.如果只做pc端，那么静态布局（定宽度）是最好的选择；2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
前端系列教程之HTML（移动端适配）
liang4297的博客
01-02 9172
说一下自己对移动端适配的一个体会吧，理论就不多说了，咱们重点说方法： 移动端适配大致有三种适配方案加上常用的布局方案 三种适配方案： 一、 百分比适配（%） 百分比主要在于主视角的定位和缩放，百分比的取值以原设计稿的尺寸为标准。 举个例子，一个元素在原设计稿里，量出来距离顶部是 200px，如果写死可能是top:200px 或者margin-top:200px,现在要转成百分比，那么这个值可能就是...
lnv-mobile-base：移动端开发脚手架-基于gulp的使用zepto，把手，asss和带移动端适配方案（flexible.js）的前端工作流，旨在帮助移动端项目的开发
02-03
基于gulp的使用zepto，把手，sass和带移动端适配方案（flexible.js）的前端工作流，有助于帮助移动端项目的开发。 背景 在移动端项目的开发中，我们会遇到一些移动端技术选型，移动端适配，前置器语言的使用规范和...
网站模板-产品服务解决方案响应式网页模板-适配移动端界面-HTML源码.zip
03-23
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
课设&毕设&公司官网-IT解决方案服务机构宣传网站模板-响应式适配移动端.zip
03-31
它采用了前沿的HTML5和CSS3技术，实现了响应式设计，能够无缝适配各种设备的屏幕尺寸。此外，它还内置了丰富的JavaScript插件，助您轻松实现各种复杂的交互效果。这套源代码文件具有极高的可定制性，您可以根据您的...
145套-各行业响应式网站模板-HTML网站源码-适配移动端设备.zip
04-09
大学生们，面对Web前端课程的大作业压力，你是否在寻求一个既高效又专业的解决方案？这份包含多套网站源码的资源包，将为你的大作业带来前所未有的轻松与信心！在这个数字化时代，一个精心制作的网站能够充分展示你...
386套-各行业响应式网站模板-HTML网站源码-适配移动端设备-解压即用.zip
04-10
这份386套响应式网站模板的HTML源码合集是前端开发领域的实用宝库，为程序员和设计师提供了一套全面的解决方案，以应对各行各业的网站构建需求。这些模板专为移动端设备优化，采用最新的Web技术，确保在各种屏幕尺寸...
h5移动端的完美适配
08-10
未来肯定是移动端的天下，接下来谈谈h5移动端的布局问题，目前有三种 1、百分比布局 ----->有点兼容性好，缺点布局的时候需要计算比较麻烦，不过可以采取工具或脚本实现。
html5实现移动端适配完美写法
09-27
主要介绍了html5实现移动端适配完美写法,需要的朋友可以参考下
html5移动端各种适配
luvzen0127的博客
07-28 1117
首先准备一个div盒子box <div class="box"></div> <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title<
【14.HTML-移动端适配】
qq_31421983的博客
05-01 1162
vw 是 CSS3 中的一个相对长度单位，它表示相对于视口宽度（viewport width）的百分比来计算长度。1vw 等于视口宽度的 1%。与其他相对长度单位（如 em 和 %）不同，vw 的值是基于视口宽度计算的，而不是基于父元素的宽度。rem 是 CSS3 中的一个相对长度单位，它表示相对于根元素（html 元素）的字体大小来计算长度。rem 的值不会受到父元素字体大小的影响，而始终是相对于根元素字体大小计算的。一般来说，如果要设置元素的。等属性，应该优先考虑使用。等属性，可以优先考虑使用。
(html+css)_移动端适配方案一（流式布局）
qq_41940987的博客
11-04 883
一、前言 小案例地址：https://github.com/xiexumei/web-demo 二、主要内容 1、移动端面对的问题：因为手机屏幕和尺寸不一样，当我们用不同手机设备浏览的...
前端HTML移动端适配
个人笔记
03-03 705
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--移动端适配--> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title&gt
HTML5、CSS进阶————移动端适配、响应式布局、BootStrap框架入门
m0_59592734的博客
04-25 1085
vw/vh(单位) 能够使用vw单位设置网页元素的尺寸 相对单位 相对于视口的尺寸计算结果 vw：viewport width 1vw=1/100视口宽度 vh： viewport height 1vw=1/100视口高度 /* 1. vw = 1/100视口宽度 */ .box { width: 50vw; height: 30vw; background-co...
vue3做移动端适配
08-16
在Vue3中进行移动端适配的方法可以使用amfe-flexible和postcss-pxtorem。在Vue2中，我们可以使用lib-flexible和postcss-pxtorem进行适配，但是在Vue3中，lib-flexible已经被弃用了。所以，推荐使用amfe-flexible和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值