移动端布局多种实现方式

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

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

相关文章

来自专栏ytkah

你的网站做好神马搜索优化了吗?神马搜索站长工具提交

  神马搜索借助uc的优势,可直接在地址输入框中输入关键词就可以搜索了,免去了输网址的麻烦(这个在国外有点long duan的嫌疑).如果你的网站被bd等se收...

7144
来自专栏星流全栈

使用 Meteor 作为 React Native 的实时后端

1146
来自专栏微信小程序开发

小程序中敏感词过滤——前端实现

3323
来自专栏王二麻子IT技术交流园地

手机网站开发相关介绍

随着无线网络技术的发展,手机上网的速度越来越快,手机的功能也越来越强大。今天就像大家介绍下手机网中的开发。 手机上网的特点 手机屏幕一般在240 * 320以上...

1757
来自专栏软件开发

PowerPoint基础

一、基础 默认后缀ppt,pptx office2003和以后的版本只支持ppt, 可以将pptx另存为ppt97-2003 ? 二、修改PPT尺寸 ? 三、新...

1839
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列 - 手绘视频导出

手绘视频最终的生成物是视频文件,前面几篇主要讲的是手绘视频的创作部分,今天讲一下手绘视频的导出问题。主要以 UWP 为例,另外会介绍一些 Web 端遇到的问题和...

3676
来自专栏IMWeb前端团队

移动端重构实战系列6——icon与图片

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

1765
来自专栏令仔很忙

Bootstrap快速上手(一)----右键菜单

一款软件,除了稳定,功能强大,用户体验也很重要。界面风格和布局的一致性让人在视觉上感觉到这是一个统一的系统,协调的系统,至于采用什么风格及颜色系统,美工和设计...

701
来自专栏互联网高可用架构

白话阿里巴巴Java开发手册(安全规约)

1302
来自专栏Thinks

设计师使用SVG的必读文章

导语-“本文适合设计师浅读,适合有追求的设计师和UI开发同学仔细研读“

3434

扫码关注云+社区