首页 >  SEO >  SEO知识 >  正文

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

14322

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优化是一个非常重要的问题。移动适配的方案有很多,选择合适的移动适配解决方案是非常的重要的。

    1006
    • 移动端适配
  • 如何正确处理SEO移动端适配

    移动端适配

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

    81
    • 移动端适配
  • 百度移动适配怎么做

    百度移动适配怎么做

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

    2709
    • 百度移动适配怎么做
  • 代码适配对百度友好代码详解

    代码适配

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

    2506
    • 代码适配
  • 什么是反向链接,及其作用

    什么是反向链接

    什么是反向链接,及其作用对于SEO优化中起着什么作用呢?反向链接的种类非常的多,只要满足上述指向关系。比如常见的友情链接、网页目录、外部链接等等都可以认定是外链形式的反向链接。

    2378
    • 什么是反向链接
  • 你分享的链接泄露隐私了吗?

    跟踪链接,隐私

    今天这个话题看似和SEO没啥关系,那就耐心看到最后就有了,先回归正题大家有没有意识到自己平时分享的链接会泄漏隐私吗?大家平时是不是会分享一些歌曲、一些短视频的链接及各种社交app应用的链接给微信好友或者是分享到朋友圈,当然分享到其它地方也是如此,只要你分享了这些链接你都将面临有隐私泄漏的可能。

    1344
    • 跟踪链接
    • 隐私
  • 网站SEO死链的如何处理

    死链,SEO

    大量死链的存在容易造成搜索引擎对网站评级的降低,因为大量的死链接的存在,会对于用户访问时的体验造成严重的伤害。同时大量的死链存在,会浪费大量的抓取量,对于网站的正常收录都会造成严重的影响。今天就和潘某人SEO一起探讨一下哪些情况需要提交死链、如何发现以及正确删除死链的方法。

    63
    • 死链
    • SEO
  • 索引量下降如何应对处理

    百度索引量

    百度索引量下降的原因,站长们应该如何正确的看待索引的增长呢?站长们乐此不疲的追求高索引量,会不会是站长们太把它当一回事了。今天就来谈谈索引量那边事我们如何正确的看待索引量。

    1225
    • 百度索引量
  • 伪原创文章会被收录吗

    伪原创,收录

    伪原创的方法有哪些?伪原创对于网站的收录有影响吗?为什么很多站点优化效果不好呢?大多数是因为站点内容的问题,内容不够优质是导致SEO优化失败的主要因素。

    1262
    • 伪原创
    • 收录
  • 网站收录速度和权重的关系

    收录和权重的关系

    网站收录速度和权重的关系,对于搜索引擎来说,对于网站的重视程度如何和这个权重并没有直接的关系,建议大家还是更多关机没人访客数的变化,这个才是重要,网站存在意义就是作为用户抓取的一个平台,而不是为了去做多好看的权重。

    1431
    • 收录和权重的关系
  • 关键词布局对SEO优化还有用吗?

    关键词,SEO

    说到SEO优化的操作就不得不提及关键词的布局以及外链建设,这是我们过去常见的操作入口,那么在如今的SEO优化场景下关键词布局对网站排名还有用吗?

    480
    • 关键词
    • SEO
  • 移动落地页中如何设置咨询功能?

    咨询框怎么设置

    移动落地页中如何设置咨询功能?才是更加符合SEO规范呢?咨询类功能在当前页只能出现一次,且位置不允许出现在顶部;在用户未主动点击的情况下,咨询的对话窗口不可自动弹出;咨询按钮可在底部或侧面悬浮,但面积不宜过大干扰用户浏览。”

    1300
    • 咨询框怎么设置
  • MIP Cache 服务下线通知

    MIP Cache关闭

    MIP Cache 服务下线通知,MIP Cache 服务至目前为止已上线了三年多,为 Web 生态输出了优质资源和更为快速的网页浏览体验。2020年6月1日 - 2020年6月30日:关闭站长平台 MIP 入口,逐步清退下线 MIP Cache 服务。

    1914
    • MIP Cache关闭
  • 哪些情况需要提交死链

    死链,404

    哪些行为会造成死链,哪些情况需要提交死链,如何正确的提交死链。​大量死链的存在容易造成搜索引擎对网站评级的降低,因为大量的死链接的存在,会对于用户访问时的体验造成严重的伤害。

    959
    • 死链
    • 404
  • flash、ifream、js、ajax不利于抓取收录吗

    ajax,flash,ifream,js,不利于抓取,抓取不到

    flash、ifream、js、ajax搜索引擎抓取不到,所以网站优化的时候就要去避免使用这些代码,这种想法是错误的,片面的,只要合理使用也可以帮助优化!

    1586
    • ajax
    • flash
    • ifream
    • js
    • 不利于抓取
    • 抓取不到
  • 关键词难易度评估方法

    关键词难度评估

    选好关键词是SEO优化的关键因素,关键词的质量可以决定搜索量、排名、以及转化等。关键词是网站和搜索引擎和用户三者衔接的桥梁。关键词的选择充满了奥秘,简单的讲我们需要考虑这个关键词的搜索量毕竟没有流量的关键词排名再高也没用,其次关键词的排名对于自己站点的难易程度,以及最关键的流量以及转化的平衡点的把握。

    904
    • 关键词难度评估
  • 百度关键词指数是什么意思

    百度指数,关键词指数

    百度关键词指数是什么意思,通俗来说,百度指数是一个数据分享平台,通过这个海量数据平台,直观的以指数展现,从而能够反应这个关键词在百度的搜索规模有多大,一段时间内的涨跌态势以及相关的新闻舆论变化,关注这些词的网民是什么样的,分布在哪里。

    3516
    • 百度指数
    • 关键词指数
  • 百度蜘蛛有权重之分吗?

    百度蜘蛛,权重

    百度搜索学院线上公开课第六讲——网站抓取建设指南,在这个百度官方的直播课程回放中,最后百度搜索工程师最后的QA中明确的表明了不存在蜘蛛权重之分的行为。

    2155
    • 百度蜘蛛
    • 权重
-- 这已经是底线了,看看别的把! --