移动端布局多种实现方式

对比总结一下热门的解决方案

  1. 通过媒体查询的方式即CSS3的 @media
  2. 天猫首页使用的 flex 弹性布局
  3. 淘宝首页使用的 rem+viewport缩放(Flexible.js)
  4. hot.css

####@media媒体查询

  • 使用方法: @media screen and (max-width: 600px) { /当屏幕尺寸小于600px时,应用下面的CSS样式/ /你的css代码/ }
  • 优点:
    • 移动端和PC维护使用同一套代码时,方法简单,成本低。
    • 可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒 体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。
    • 调整屏幕宽度的时候不用刷新页面即可响应式展示。
  • 缺点:
    • @media书写代码多,维护不方便
    • 为了兼顾大屏幕或高清设备,会造成其他设备资源浪费。

####Flex 弹性布局 建议参考阮一峰老师的flex教程 使用display:flex;进行移动端布局


####Flexible- 使用rem+viewport进行布局 淘宝使用的方案,根据屏幕宽度设定 rem 值,需要适配的元素都使用 rem 为单位,不需要适配的元素还是使用 px 为单位。lib-flexible是一个制作H5适配的开源库

  1. 首先添加meta标签设置viewport
  2. 引入Flexible的阿里CDN 或者可以通过github进行npm安装下载引入 和

具体的入门教程可以看大漠大大的 “使用Flexible实现手淘H5页面的终端适配 “教程进行学习进阶)


####hotcss · Github 插件描述:hotcss不是一个库,也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2665
来自专栏魂祭心

原 canvas绘制clock

4204
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4055
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3225
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

4948
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2617
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4878
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25410
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5656
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3008

扫码关注云+社区