[分享] 移动端布局多种实现方式

简介: [分享] 移动端布局多种实现方式

title: 移动端布局多种实现方式
date: 2017年9月17日 02:04:03
tags: css
categories: 教程

author: "JiaWei"

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

  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

  1. 引入Flexible的阿里CDN

或者可以通过github进行npm安装下载引入 和

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


hotcss · Github

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

目录
相关文章
|
7月前
移动端的布局如何使用媒体查询
移动端的布局如何使用媒体查询
96 2
|
1月前
|
UED
常见的布局方式
【10月更文挑战第22天】这些布局方式各有特点和适用场景,在实际开发中,通常会根据具体需求选择合适的布局方式或结合多种布局方式来实现理想的页面布局效果。
37 3
|
2月前
|
编解码 前端开发 UED
前端:移动端视口配置
移动端视口配置是指针对移动设备浏览器设置视口的宽度、高度和缩放等属性,以确保网页能根据不同的屏幕尺寸和分辨率进行适配,提供更好的用户体验。合理的视口配置是移动优先设计的关键环节。
|
5月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
7月前
|
编解码 前端开发 UED
前端需要完完全全掌握的这些布局方案
前端需要完完全全掌握的这些布局方案
|
前端开发
从头学前端-移动端布局
从头学前端-移动端布局
|
编解码 前端开发 JavaScript
前端7大常用布局方式
前端7大常用布局方式
726 0
|
Web App开发 编解码 前端开发
【前端】【响应式设计】【移动端】响应式设计作业01:视口、二倍图
【前端】【响应式设计】【移动端】响应式设计作业01:视口、二倍图
306 0
|
Web App开发 前端开发 JavaScript
前端不得不了解的5种布局方式
前端不得不了解的5种布局方式
186 1
前端不得不了解的5种布局方式