首页 >  SEO >  SEO知识 >  正文

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

 作者:潘某人SEO
14121

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中较大的那一个。


申明:以上内容仅代表个人观点,仅供学习参考 本站图片来源于站点原创或CC0协议图库站点或已获得VRF授权的图库站点 本文参考于互联网如有侵权,请联系 pmrseo@foxmail.com删除 本文地址:https://www.chateach.com/seo/seozhishi/429
相关文章
  • 移动端适配解决方案

    移动端适配

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

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

    百度移动适配怎么做

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

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

    代码适配

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

    2332
    • 代码适配
  • 百度飓风算法解读

    百度飓风算法

    百度飓风算法主要是打击恶劣采集拼凑行为,保护原创作者的权益,提升用户的阅读体验,促进搜索引擎生态的健康发展。

    1437
    • 百度飓风算法
  • 百度搜索引擎蜘蛛喜欢什么样的网站结构

    seo网站结构

    百度搜索引擎蜘蛛喜欢什么样的网站结构?希望能在百度获得好的排名、更多优质低价的流量,这个前提就是网站得有好的结构,百度蜘蛛才能顺利、快速的抓取,也就是说网站结构是关键词排名、链接优化、内容优化的前提。

    1400
    • seo网站结构
  • 如何做好原创内容版权保护

    版权保护,原创内容保护,百度时间因子

    分享如何对站点原创内容的保护,如何查找抄袭站点,如何保留抄袭证据等方法,来保护自己的合法权益。

    1007
    • 版权保护
    • 原创内容保护
    • 百度时间因子
  • 适用各种编程语言网站的百度API链接推送方法

    api推送,百度SEO,curl提交

    主动提交也叫API提交,是通过api接口调用来实现连接的推送,非常的便捷高效。只需简单的几行代码就可以实现秒提交数万的链接,还是非常给力,但是就是需要一定编程能力。不过当你看到这篇文章时,就需要恭喜你得到一种傻瓜式的API提交方法,无需编程开发能力,也无需对网站做任何的修改。

    1713
    • api推送
    • 百度SEO
    • curl提交
  • 网站TDK常规写法

    description描述标签,keywords标签,title标签

    本段文字讲述 title标题标签 、keywords关键词标签 、 description描述标签 该如何撰写以及所需注意事项。TDK最重要的一条就是要与文章内容高度相关,而不是想写什么就写什

    1261
    • description描述标签
    • keywords标签
    • title标签
  • 百度搜索算法大全,站长速度查阅收藏

    百度搜索算法

    百度搜索算法大全,百度算法主要从:页面内容质量、用户需求满足、用户体验友好、搜索公正及用户安全,今天给大家梳理下这四块内容下涉及到的算法。作为seo优化从业者必须掌握的搜索引擎的算法,梳理一下百度搜索引擎常见的算法。飓风算法、劲风算法、细雨算法、蓝天算法、冰桶算法、惊雷算法、清风算法

    1718
    • 百度搜索算法
  • 百度搜索引擎优先建重要库的原则

    搜索引擎,百度spider

    Baiduspider抓了多少页面并不是最重要的,重要的是有多少页面被建索引库,即我们常说的“建库”。众所周知,搜索引擎的索引库是分层级的,优质的网页会被分配到重要索引库,普通网页会待在普通库,再差一些的网页会被分配到低级库去当补充材料。目前60%的检索需求只调用重要索引库即可满足,这也就解释了为什么有些网站的收录量超高流量却一直不理想。

    227
    • 搜索引擎
    • 百度spider
  • 链接权重分析HITS算法的不足之处

    HITS算法的不足之处,链接权重分析

    搜索引擎链接权重分析,主要参考。HITS算法是Web结构挖掘中最具有权威性和使用最广泛的算法。HITS算法的不足之处,引用越多高质量页面的网页,其链接权威度越高。

    1999
    • HITS算法的不足之处
    • 链接权重分析
  • SEO删除旧内容,对排名有影响吗?

    旧内容删除排名变化

    SEO删除旧内容,对排名有影响吗?SEO人员开始研究“以旧换新”或者直接删除旧内容的策略。前期页面排名一定是会有影响,可能下降,也可能上升,但从长期的角度来衡量,

    1498
    • 旧内容删除排名变化
  • seo中关键词筛选

    关键词优化

    关键词的选择非常的重要,知道如何从海量的关键词筛选出有价值的关键词对于SEO优化来说是至关重要的,关键词应该如何使筛选呢,才可以更好的满足搜索需求的同时满足SEO优化。

    1006
    • 关键词优化
  • 如何用代码批量查询收录

    批量收录查询代码

    如何用代码批量查询百度360搜狗收录,对于SEO优化来说收录是大家比较关注的,一般使用的查询方法是拿页面的URL或者标题去对应的搜索引擎手动查询收录,但是存在这局限性,今天就来分享一下如何通过代码实现网站收录查询。

    1416
    • 批量收录查询代码
  • 什么是闭站保护?如何申请与解除?

    闭站保护,网站索引

    闭站保护是用于保护网站因为某些原因需要关停一段时间,来保护网站在搜索引擎中的索引数据,从而不会因为这段时间无法访问造成过大的影响。

    857
    • 闭站保护
    • 网站索引
  • SEO如何选择域名,你选对了吗?

    域名,网站优化

    域名的选择主要是从站点的运营和SEO优化两个层面考虑,那你觉得哪个因素更加重要呢,可以心里默选一下,答案稍后揭晓。域名选择最基础的点:历史干净、便于记忆。

    453
    • 域名
    • 网站优化
  • 长期不收录的页面如何处理?

    收录

    相信大家在日常的SEO优化工作中必然会遇到网站页面不收录的问题,那么我们应该如何得到正确对待和处理这些长期不收录的页面,出现问题不是最可怕的,可怕的是采取了错误的处理方式,加剧了问题和引出了更多的问题。

    453
    • 收录
  • 什么是SEO网站权重

    网站权重

    什么是SEO网站权重,网站权重对于网站优化的重要性。如何查看自己网站的权重,以及如何进行SEO优化提升。方向优质内容,持之以恒坚持优化。

    1483
    • 网站权重
-- 这已经是底线了,看看别的把! --