一 ，背景

在移动端页面开发我们经常会遇到一件尴尬的事 我们所开发出来的页面跟设计师所给的页面差别很大 再加上移动设备屏幕的大小不一出来的效果更是参差不齐

然后....

当然 现实情况没有这么糟糕...但因为前端页面是是最直接的展示给用户的 如果跟差异太大 这个页面其实是失败的 而设计师也会不断的找你调视觉，所以我们就要最大限度的实现设计 作为设计师和用户的桥梁完美的展现页面...

二，使用百分比

在移动页面的布局上，我们必须要考虑的是移动设备分辨率多样性，使用传统的px来定义一个块儿级元素是不理想的，因为你要为所有分辨率的手机都做适配是一件极其繁琐的事，虽然css3的媒体查询可以实现 ，但我个人认为媒体查询只适合跨平台的兼容 ，比如手机 ，ipad，pc 这三种设备同时实现一个页面并达到响应效果的时候，百分比的使用可以解决这个问题，因为他是相对的 相对于设备的宽度来使页面在不同分辨率的手机上达到完美的响应，接下来我们慢慢聊如何使用百分比

三，百分比＋margin 实现百分百响应

在移动端开发的时候 我们的页面初始化的时候都会写上这样一行代码

html,body{width:100%; position:relative;}

将html,body元素的宽度设置为100%，目的是将页面100%撑开达到与设备宽度一致,因为百分比都是相对于父级而言的，将根节点的元素设置为100%，其子元素的宽度都会相对于父级来设置。

接下来我们研究一下margin和百分比的配合使用

<!DOCTYPE HTML>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />

    <meta name="apple-touch-fullscreen" content="YES" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link rel="stylesheet" type="text/css" href="../css/reset.css">

     <style type="text/css">

       html,body{ width: 100%; position:relative;}

      .all{ width: 100%;}

      .header{ width: 100%; background: #ff6666; height: 40px; margin-top: 20%;}

    </style>

  </head>

  <body>

      <div class="all">

        <header class="header"></header>

      </div>

  </body>

</html>

我们使用chrome的模拟器观察页面效果

模拟iphone6效果，设备的宽度是375px，通过侧面的尺度可以看到 我们使用margin-top:20%,header元素距离顶部的高度是75px，我们再改变下页面的宽度看看

当我们把模拟器的宽度拉到500px时候 ，可以发现header距离顶部的高度变为100px；

所以不难发现 当使用百分比来给margin-top赋值的时候 距离顶部的高度其实 是设备宽度的百分比 （375*20%＝＝75， 500*20%＝＝100）；同理 margin-left,margin-right,margin-bottom都一样可以这样使用；

四，实战应用

当我们拿到设计师的页面的时候首先要算一把

下面区域距离上面区域的高度是20px 页面总宽度是750px 所以转换成页面的时候 下面的margin-top应该是 (20/750)%; 这样才会在所有设备上达到完全响应的效果。下面是页面最终效果 扫码查看哟.

H5移动前端完美布局之－margin百分比的使用的更多相关文章

  1. H5移动前端完美布局之padding

    序上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padd ...

  2. H5横向三栏布局

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  3. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

  4. 布局时margin会影响父元素

    布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...

  5. 移动平台3G手机网站前端开发布局技巧汇总

    移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论     您或许正在 ...

  6. Flexible实现H5页面的rem布局适配

    1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...

  7. margin百分比，重叠和auto

    一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed) ...

  8. H5纯前端生成Excel表格

    H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...

  9. 小程序支付及H5支付前端代码小结

    小程序支付和H5支付前端都不需要引入其他的js , 只需要后台将相关的参数 ( timeStamp: '', nonceStr: '', package: '', signType: 'MD5', p ...

随机推荐

  1. SPOJ-SQRBR Square Brackets

    原题传送:http://www.spoj.pl/problems/SQRBR 动态规划. 设f[i][j]表示前i个位置在合法情况下缺少j个右括号的方案数. 转移方程为: f[i][j] = f[i- ...

  2. POI中设置Excel单元格格式

    引用:http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结: 先获取工作薄对象: HSSFWork ...

  3. sublime 配置C++

    1. 安装C语言编译器MinGW,并把MinGW安装目录下的bin目录添加到环境变量PATH里.详细方法参照MinGW安装和使用 2. 在SublimeText安装目录下的Data\Packages\ ...

  4. jQuery .tmpl() 用法

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  5. BZOJ2199: [Usaco2011 Jan]奶牛议会

    趁此机会学了一下2-SAT. 以前的2-SAT都是用并查集写的,只能应用于极小的一部分情况,这次学了一正式的2-SAT,是用一张有向图来表示其依赖关系. 2-SAT的介绍参见刘汝佳<训练指南&g ...

  6. ECMAScript 5.1中对属性的操作

    此操作只针对新版本浏览器. Object.defineProperty(obj,'name',{configurable:true/false,enumberable:true/false,value ...

  7. make_pair() (STL)

    转载来的 Pairs C++标准程序库中凡是“必须返回两个值”的函数, 也都会利用pair对象 class pair可以将两个值视为一个单元.容器类别map和multimap就是使用pairs来管理其 ...

  8. Eclipse里面开发ExtJS程序

    首先在http://extjs.org.cn/download下载ext ,我下载的版本是ext-3.4.1.1-gpl,下载好以后解压. 然后在eclipse里面先建立一个web项目,建立好后再we ...

  9. VS2010中出现无法嵌入互操作类型

    针对word或excel操作时,出现VS2010中,无法嵌入互操作类型“……”,请改用适用的接口的解决方法 问了度娘,解决方法如出一辙:选中项目中引入的dll,鼠标右键,选择属性,把“嵌入互操作类型” ...

  10. ***ECharts图表入门和最佳实践

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...