移动端适配的几种实现方式

rem布局

用js获取视窗宽度,然后设置html的font-size为视窗宽度的十分之一,而rem表示相对于根元素的html的大小,所以1rem即表示视窗宽度的十分之一。这样通过rem于html的font-size的关系,间接实现了一个相对于视窗宽度的百分比。

flex布局

类似于百分比布局,无需计算百分比,可以很好的适配所有屏幕。

手机天猫 典型的flex布局,flex做了很好的兼容处理,高度写死,可查看顶部搜索栏源码缺点:

有着和百分比布局一样的缺点,高度不便调整

有几种不同的flex标准,在低端ios和安卓中有着各种各样的兼容性问题


百分比布局

使用子元素在父元素下的百分比为单位,使用子元素在不同屏幕宽度下宽度表现一致。利用img标签的特性,只设宽度等图片加载完,这种方法会导致大量的重排,并且非固定高度会导致懒加载等功能难以实现

缺点:

宽度可以随屏幕适应,但高度不能,宽屏下会被拉伸,具体表现为,iphone 4中看到的是正方形,而到了iphone 6s中看到的是长方形。需要手动计算子元素在父元素下的百分比,计算麻烦百分比的大小往往需要精确到小数位6到8位。

移动适配

字体适配

适配规则,段落文字在大屏上希望能看到更多文字,标题文字或字数固定的文字应该应用缩放原则,随屏幕变大而变化。视口不缩放,通过媒体查询去设置不同范围内的大小视口缩放,根据不同的dpr值去设置相应字体大小,标题文字或长度固定的文字可以使用rem单位去做适配。

vm布局

这是一个新的布局单位,目前android4.4以上支持,总共有四个vm,vh,vmin,vmax,分别表示视窗宽度,视窗高度,视窗宽高中的最小值,视窗宽高中的最大值。1vw表示百分之一的视窗宽度。

现在介绍新的纯CSS的相对单位vw,vh,它们相对的是终端视口,视口(移动端你就可以当成屏幕就好啦)的宽为100vw,高为100vh。使用起来很简单,如果你需要一个宽高各为视口一半的div,只需要在css里面这样写:div {width: 50vw ;height: 50vh},是不是很方便。但是有这么以一种情况,如果一个移动端页面某个元素按vw给宽度样式,页面随手机横屏时(vm,vh的相对值已互换)希望它的大小不变呢。你可以试试vmin,vmax。vmin代表vw与vh中较小的那一个,vmax代表vm与vh中较大的那一个。


申明:本站内容仅代表个人观点,仅供学习参考;未经授权任何个人或组织单位不得复制、转载、摘编以及其它形式的应用!

本站文章可能使用到互联网上的资料,若对您造成困扰,请联系 kk19@foxmail.com除理

本文地址:https://www.chateach.com/seo/seozhishi/429

相关文章

  • 代码适配对百度友好代码详解

    代码适配

    移动端适配的方式有多种形式,比如通过规则适配、响应式、独立移动PC站等方式都可以实现PC移动端适配的效果,今天详细讲一下本人比较喜欢的适配方式即代码适配,这种适配方式可以说是尽可能的结合了上面集中适配方式的优点,对于SEO优化来说还是比较友好的。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2786
    • 代码适配
  • 移动端适配解决方案

    移动端适配

    随着移动互联网的不断发展,在某些领域移动端的流量已经远超PC端,因此越来越多的站点开始重视移动端的优化,如何把移动端和PC端进行结合,对于SEO优化是一个非常重要的问题。移动适配的方案有很多,选择合适的移动适配解决方案是非常的重要的。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1297
    • 移动端适配
  • 百度移动适配怎么做

    百度移动适配怎么做

    当我们的网站同时存在pc站点和移动站点的时候,两者都被收录的时候,有的时候搜索引擎不能很好的判断哪个网址是PC端的哪个是移动的端的,就需要进行移动端适配规则提交

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 3043
    • 百度移动适配怎么做
  • 如何正确处理SEO移动端适配

    移动端适配

    随着移动互联网的浪潮已经席卷了全球。在某些领域,移动端流量不仅超越了PC端,甚至成为了用户获取信息和服务的主要途径。因此,如何优化网站以适应移动设备,同时保持良好的搜索引擎优化(SEO)表现,已成为每个站点必须面对的问题。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 670
    • 移动端适配
  • 如果你觉得AI对你帮助非常大,那你一定要看完这篇文章

    AI认知吝啬鬼

    现在大家干活、写东西,遇到不懂的,第一反应就是问AI。确实快,几秒钟出结果,省时省力。但你想过没有,如果连思考都省了,最后剩下的是啥?这篇文不打算妖魔化AI,毕竟它真是个好工具。但咱得聊点扎心的:当你习惯了“喂到嘴边”的答案,你的判断力还在吗?为什么很多人觉得AI全对?咱们今天就来扒一扒,怎么在享受便利的同时,别让自己变成只会点头的“接收器”。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 31
    • AI认知吝啬鬼
  • 网站URL后缀:SEO优化的关键细节,还是无效焦虑?

    URL后缀

    网站链接后面到底要不要带“.html”等后缀?这问题估计很多刚接触建站的朋友都纠结过,今天咱就站在搜索引擎优化和实际运营的角度,分析下这个问题。先给个定心丸:对于现在的搜索引擎来说,带不带.html等后缀,对排名的影响直接可以忽略。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 50
    • URL后缀
  • 给网站加上结构化数据,让搜索引擎“爱上你”

    结构化数据,JSONLD

    很多做SEO的朋友,每天盯着关键词排名,发外链、写文章,忙得团团转,结果流量还是上不去。其实,你可能忽略了搜索引擎最需要的东西——“理解”。结构化数据就是给网页贴个“身份证”,告诉搜索引擎你的网站到底是干啥的、作者是准、啥时候更新的。别小看这几行代码,它能直接决定你的网页在搜索结果里长啥样,甚至决定了AI能不能抓取到你。这篇文章,潘某人SEO就带大家把这层窗户纸捅破,看看怎么用技术流手段,低成本撬动大流量。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 72
    • 结构化数据
    • JSONLD
  • 网站URL结尾的斜杠,到底该怎么加?一份SEO角度的实战指南

    seo指南,URL斜杠

    URL结尾的斜杠问题,常被视作技术细节,实则是网站架构规范化的基石。从SEO角度看,`example.com/page`与`example.com/page/`被搜索引擎视为两个独立页面,若同时可访问,将引发重复内容、权重分散等隐患。本文深入解析斜杠背后的服务器逻辑,强调“统一与规范”的核心原则。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 103
    • seo指南
    • URL斜杠
  • AI时代SEO该如何做?

    AI,SEO

    AI搜索的普及让许多SEO从业者陷入流量焦虑,但真正的危机并非技术本身,而是方向的迷失。与其盲目追逐热点或试图与AI比拼内容产量,不如转向AI无法取代的领域:真实经验、深度复盘、原创数据与专业洞察。这些“AI-Proof”内容不仅难以被复制,反而更容易被AI引用为可信来源。与此同时,大量低质站点因无法适应新规则而退出竞争,优质内容的生存空间反而扩大。SEO的未来不在于“被点击”,而在于“被信任”。选对方向,深耕价值,才能在AI时代真正站稳脚跟。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 82
    • AI
    • SEO
  • 突然发现大多数网站应用都不堪一击

    并发测试,攻击防御

    相信很多人都听说过网络攻击,有时候商战就会采用最朴实无华的下三滥手段,但是别慌对于大多数站点来说根本没有攻击的价值,听着有点可怜哈哈哈。毕竟大规模的DDos或CC攻击也是挺费资源挺费钱的,但是最近潘某人SEO突然意识到一个可怕的事实,大多数网站真的是不堪一击,没有任何的防御,基础的防御都没有,攻击者可以零成本瞬间使网站或应用宕机。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 325
    • 并发测试
    • 攻击防御
  • seo必看之一键实现链接推送

    seo,必应

    分享给一个方法,即使不懂技术也能让你轻松实现api推送链接,让你实现使用api接口实现一键提交。学会这个技能,即使没有技术加持,也能让你简单轻松的实现链接的批量推送。近些年来,微软必应(Bing)搜索引擎,微软将必应深度整合到其庞大的产品生态中,形成了强大的流量入口,其效果和流量确实呈现出显著的上升趋势。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 448
    • seo
    • 必应
  • 搜索流量 vs 推荐流量:很多人搞错了关键所在!

    搜索流量,推荐流量

    在内容生态中,搜索流量和推荐流量是两个维度,它们背后的逻辑、用户意图、内容形态,甚至SEO策略,都完全不同。搜索流量:用户主动搜索关键词、明确需求,如“如何做SEO”;内容类型,深度、结构化、信息密度高;长期有效,可积累。推荐流量:平台算法主动推送,被动浏览,娱乐消遣为主,短平快、情绪化、视觉冲击强,短期爆发,易过期。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 559
    • 搜索流量
    • 推荐流量
  • SEO优化做得好,一半功劳是“抄”来的?

    SEO优化

    你是不是也曾为SEO优化头疼不已?看着别人的网站排名飙升,自己的却纹丝不动,焦虑感油然而生。别急,今天潘某人SEO分享一个颠覆你认知的观点:SEO优化最快的成功方式,竟然是“抄袭借鉴”!借鉴成功者经验,相当于站在巨人的肩膀上,直接跳过无效努力,直奔结果。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 382
    • SEO优化
  • SEO原创内容真的正确吗?大多人都搞错了重点!

    SEO原创

    “做SEO,必须原创!”这句话你是不是已经听了无数遍?从搜索引擎官方到SEO大神,都在强调“原创内容有利于排名”。于是,无数人开始熬夜写稿、花钱请写手、甚至用AI批量生成“原创内容”……但结果呢?流量没涨,排名没动,投入的时间和金钱却打了水漂。因为你可能从一开始就搞错了重点——原创 ≠ 有价值,而SEO真正需要的,是价值,不是“原创”这个标签。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 523
    • SEO原创
  • “搜索引擎蜘蛛分权重吗?”——揭秘SEO圈里的重大误区

    蜘蛛,搜索引擎

    在SEO(搜索引擎优化)的世界里,有一句话几乎每个新手都听过:“你这个网站权重太低,蜘蛛都不来爬!”于是很多人开始焦虑:“是不是我网站没权重,搜索引擎蜘蛛根本瞧不上我?”“大站发文章秒收录,我这小站三天都不来爬,是不是被歧视了?”

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 462
    • 蜘蛛
    • 搜索引擎
  • 揭秘搜索引擎蜘蛛IP:如何轻松获取所有搜索引擎蜘蛛IP?

    蜘蛛IP,搜索引擎

    在搜索引擎优化(SEO)的世界中,搜索引擎蜘蛛的IP地址如同“隐形访客”的身份证号码。掌握这些IP不仅能帮助你精准识别真实蜘蛛,还能优化网站抓取策略、过滤垃圾流量,甚至预判网站的收录趋势。那么,如何高效获取并验证这些IP?今天潘某人SEO将为带你深入探索!

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 524
    • 蜘蛛IP
    • 搜索引擎
  • SEO已死,是真相还是忽悠?

    SEO已死

    SEO的环境已经经历了巨大的变革,尤其是在短视频内容和AI技术迅速发展的背景下。来越多的用户倾向于通过短视频平台来获取信息。这改变了传统的文本搜索模式。随着AI的发展,搜索引擎能够提供更加精确的答案,有时甚至不需要用户点击进入网站。于是,一些人得出结论:“SEO已死”,但真相真的是如此吗?

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 505
    • SEO已死
  • 别再这么使用sitemap,可能正在毁掉你的站点

    sitemap,网站地图

    Sitemap(站点地图)本身是一个强大的工具。它以结构化的XML格式,清晰地列出网站上希望搜索引擎索引的所有重要页面链接。对于大型、结构复杂或新上线的网站,提交Sitemap能显著帮助搜索引擎更快地发现站点的内容。然而,任何工具都有其两面性。Sitemap这把“钥匙”,既能打开搜索引擎友好抓取的大门,也可能为不速之客大开方便之门。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 523
    • sitemap
    • 网站地图
  • 原创 ≠ 高收录高排名!真正决定内容成败的,是这4个关键点!

    原创,收录

    在搜索引擎算法不断升级的今天,过去那种靠技术“钻空子”就能轻松获取排名的时代已经一去不复返了。越来越多的内容创作者和网站运营者意识到:只有产出优质内容,才能真正赢得流量与用户。于是,大家纷纷转向原创、伪原创,试图通过“原创内容”来提升收录、获得排名。但现实却往往令人失望——很多站点即便坚持原创,依然难见起色,甚至连基本的收录都难以保障。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 685
    • 原创
    • 收录
  • SEO优化全流程解析:从零开始,打造高效搜索引擎友好网站

    搜索引擎

    网站SEO(搜索引擎优化)已成为企业获取流量、提升品牌知名度的关键策略之一。然而,对于许多初学者而言,如何系统地进行SEO优化仍是一个复杂的问题。今天,潘某人SEO就来详细探讨一下SEO优化的基础流程,帮助您从无到有建立一个高效的搜索引擎友好网站。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 655
    • 搜索引擎