1.布局的总体结构框架:

   

 2.注意事项:

(a):如果是左右两栏的布局方式,须在article的同级加一个aside;

因为是同级,所以必须设置同样的样式;而且他俩的父级,也就是section必须转化为弹性盒子,(因为元素在弹性盒子里面可以在一行排列),

哪一个需要固定宽度就给他设置固定宽度,另外一个只需设置flex=1即可;

此外还需解决高度塌陷问题,将他们俩都设置 “overflow=auto //一定是auto//不能是hidden或者其他。”

 (b):常规一栏的布局,只需按部就班写出结构以上框架即可;(除去aside)

然后其css样式,所有移动端都一个模子,首先一定是怪异盒模型

section{width:100%;height:100%;padding:上 0 下 0}

article{width:100%;height:100%;overflow:auto}

所有在页面要呈现的东西全部写在article下面的div里面即可。

出现内容贴边现象,就只需在article里面加padding即可。

(c):底部 footer里面 icon图标文字字和常规文字搭配写法:

其实很简单只需将footer转换成弹性盒子,然后里面写几个图标就几个盒子,把icon字和常规文字写在每一个盒子里面,

接着将每一个盒子转换成弹性盒子,

主轴切换成竖行;“column”。

如此,移动端rem布局轻松搞定!!!!

移动端Rem布局注意事项的更多相关文章

  1. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  2. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  3. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...

  4. 移动端rem布局和百分比栅格化布局

    移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...

  5. 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

    先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

  6. 第132天:移动web端-rem布局(进阶)

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  7. 关于移动端 rem 布局的一些总结

    [资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...

  8. 关于移动端rem 布局的一些总结

    1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...

  9. 十八、移动端rem布局

    使用rem布局,首先要知道自己是根据UI给的视效图的多少基准的,这里是以750px为基准,代码如下: //rem布局,此处根据750px来设置,放大100倍 (function(doc, win) { ...

随机推荐

  1. 019 模块2-time库的使用

    目录 一.概述 二.time库基本介绍 2.1 time库概述 三.时间获取 四.时间格式化 4.1 格式化控制符 4.2 时间格式化-代码 五.程序计时应用 5.1 程序计时 六.单元小结 参考:h ...

  2. FreeSql (二)自动迁移实体

    FreeSql 支持 CodeFirst 迁移结构至数据库,这应该是(O/RM)必须标配的一个功能. 与其他(O/RM)不同FreeSql支持更多的数据库特性,而不只是支持基础的数据类型,这既是优点也 ...

  3. c语言运算优先级与结合方向的问题

    c语言运算的结合方向一直困扰我,不过我终于get到了哈哈 先附上c语言运算优先级和结合方向图片 以上有c语言一共的15个优先级,从上往下递增 c语言的运算符号有很多,当我们打代码或者看代码的时候符号多 ...

  4. [kuangbin带你飞]专题十六 KMP & 扩展KMP & Manacher 题解报告

    来刷kuangbin字符串了,字符串处理在ACM中是很重要的,一般比赛都会都1——2道有关字符串处理的题目,而且不会很难的那种,大多数时候都是用到一些KMP的性质或者找规律. 点击标题可跳转至VJ比赛 ...

  5. Visual Studio Code安装以及C/C++运行环境搭建

    众所周知VSCode是全宇宙最好用的编辑器 (雾 配置了很久,今日终于配置完成了,还是有点麻烦的,本文是为了方便一些不懂怎么配置的小白,以及还有一些美化教程. 一.安装 Visual Studio C ...

  6. Cabloy全栈JS框架微创新之一:不一样的“移动优先 PC适配”

    前言 目前流行的前端UI组件库都支持移动设备优先的响应式布局特性.但基于Mobile和PC两个场景的不同用户体验,也往往会实现Mobile和PC两个版本. PC场景下的Web工程,如大量的后台前端管理 ...

  7. 生成式学习算法(三)之----高斯判别分析模型(Gaussian Discriminant Analysis ,GDA)

    高斯判别分析模型(Gaussian Discriminant Analysis ,GDA) 当我们分类问题的输入特征$x $为连续值随机变量时,可以用高斯判别分析模型(Gaussian Discrim ...

  8. [Leetcode] 第309题 最佳买卖股票时机含冷冻期

    一.题目描述 给定一个整数数组,其中第 i 个元素代表了第 i 天的股票价格 .​ 设计一个算法计算出最大利润.在满足以下约束条件下,你可以尽可能地完成更多的交易(多次买卖一支股票): 你不能同时参与 ...

  9. BOM之window核心模块

    Window对象包含以下五大核心:document,screen,navigator,history,location. 一     document 文档 document包含了浏览器对标准DOM实 ...

  10. 挖穿各大SRC的短信轰炸

    今天给大家分享一个短信轰炸绕过的姿势,大疆.百度.腾讯等等src都有用此方法绕过的案例. 给大家看一下 这里就不给大家截图了,在src中提交的截图都没有打码,这里放出来不太方便. 这里就只举出大疆的例 ...