移动端布局多种实现方式

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

  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 条评论
登录 后参与评论

相关文章

来自专栏做全栈攻城狮

Windows桌面软件开发-Win桌面客户端开发神器 第二课

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面向对象编程浅聊,...

3514
来自专栏Python自动化测试

selenium中对富文本的处理

在互联网的很多产品中,富文本是经常存在的,因为在富文本中,可以插入图片,插入视频以及对字体等等可以进行调整,对于web的自动化测试人员来说,对于富文本的操作是...

1633
来自专栏快乐八哥

Web开发之CSS

  Web开发,除了后台开发和数据开发,很大一块是前端开发。前端开发中使用最大的技术是:HTML(现在也有项目开始使用HTML5了,比如沪江英语的听力曲线使用h...

20910
来自专栏张戈的专栏

解决SecureCRT的vim中为下划线而无高亮问题,附最佳护眼配色方案。

今天第一天上班,发现新公司也是用的最熟悉的 SecureCRT 终端。领到自己的办公电脑后,第一件事就是下载并安装了 SecureCRT 7.1。并设置了以前最...

5125
来自专栏IMWeb前端团队

移动端重构实战系列3——各种等分

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

1.2K7
来自专栏互联网杂技

单选按钮的用户体验设计

单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个时。换句话说,点选某个尚未选中的单选按钮,之前的选择就会恢复成...

34010
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

1755
来自专栏用户画像

jQuery之datetimepicker控件(时间单位精确到分钟)

813
来自专栏liulun

学习WPF——使用Font-Awesome图标字体

图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可...

2805
来自专栏腾讯社交用户体验设计

打造H5动感影集的爱恨情仇(动画性能篇) - 腾讯ISUX

1674

扫码关注云+社区