<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

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

    <meta name="format-detection"content="telephone=no, email=no" />

    <!-- UC应用模式 -->

    <meta name="browsermode" content="application">

    <!-- QQ应用模式 -->

    <meta name="x5-page-mode" content="app">

    <title>Document</title>

    <style type="text/css">

      *{ -webkit-box-sizing:border-box;

         -moz-box-sizing:border-box;

         box-sizing:border-box;

      }

       .head,.footer,.wrap-page{ position: absolute; left: 0; right: 0;}

       .head,.footer{ height: 44px; background-color: #fff; text-align: center; z-index: 900; line-height: 44px;}

       .head{ top: 0; border-bottom: 1px solid #333;}

       .footer{ bottom: 0; border-top: 1px solid #333;}

       .wrap-page{ top: 44px; bottom: 44px; overflow-y:auto; -webkit-overflow-scrolling:touch;}

       .page{ padding: 10px;}

       .page p{ margin-bottom: 10px;}

    </style>

</head>

<body>

    <header class="head">哈哈哈。我是header</header>

    <div class="wrap-page">

         <section class="page">

        <p>因为fixed定位，滚动的时候bug太多，特别是有表单元素的时候得慎用；而flex布局兼容方面有一定问题，好像性能也不是很好，况且如果是在body下面直接布局的话，只有上中下这几个元素还好，如果再添加上弹窗，panel什么的子元素搞不好还有问题得深入；所以选择绝对定位相对来说还是比较靠谱的。而优化的元素位置关系，因为国产的安卓手机太多，有些还不太支持，再加上隐藏的元素选择器还有效，所以暂时不考虑。</p>

        <p>最后我们一般采用常规结构的绝对定位来布局。</p>

        <p>因为fixed定位，滚动的时候bug太多，特别是有表单元素的时候得慎用；而flex布局兼容方面有一定问题，好像性能也不是很好，况且如果是在body下面直接布局的话，只有上中下这几个元素还好，如果再添加上弹窗，panel什么的子元素搞不好还有问题得深入；所以选择绝对定位相对来说还是比较靠谱的。而优化的元素位置关系，因为国产的安卓手机太多，有些还不太支持，再加上隐藏的元素选择器还有效，所以暂时不考虑。</p>

        <p>最后我们一般采用常规结构的绝对定位来布局。</p>

        <p>因为fixed定位，滚动的时候bug太多，特别是有表单元素的时候得慎用；而flex布局兼容方面有一定问题，好像性能也不是很好，况且如果是在body下面直接布局的话，只有上中下这几个元素还好，如果再添加上弹窗，panel什么的子元素搞不好还有问题得深入；所以选择绝对定位相对来说还是比较靠谱的。而优化的元素位置关系，因为国产的安卓手机太多，有些还不太支持，再加上隐藏的元素选择器还有效，所以暂时不考虑。</p>

        <p>最后我们一般采用常规结构的绝对定位来布局。</p>

        <p>因为fixed定位，滚动的时候bug太多，特别是有表单元素的时候得慎用；而flex布局兼容方面有一定问题，好像性能也不是很好，况且如果是在body下面直接布局的话，只有上中下这几个元素还好，如果再添加上弹窗，panel什么的子元素搞不好还有问题得深入；所以选择绝对定位相对来说还是比较靠谱的。而优化的元素位置关系，因为国产的安卓手机太多，有些还不太支持，再加上隐藏的元素选择器还有效，所以暂时不考虑。</p>

        <p>最后我们一般采用常规结构的绝对定位来布局。</p>

        <p>因为fixed定位，滚动的时候bug太多，特别是有表单元素的时候得慎用；而flex布局兼容方面有一定问题，好像性能也不是很好，况且如果是在body下面直接布局的话，只有上中下这几个元素还好，如果再添加上弹窗，panel什么的子元素搞不好还有问题得深入；所以选择绝对定位相对来说还是比较靠谱的。而优化的元素位置关系，因为国产的安卓手机太多，有些还不太支持，再加上隐藏的元素选择器还有效，所以暂时不考虑。</p>

        <p>最后我们一般采用常规结构的绝对定位来布局。</p>

      </section>

    </div>

    <footer class="footer">我是foot</footer>

</body>

</html>

漠大链接：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-mobile-layout.html

M端页面-绝对定位布局的更多相关文章

  1. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  2. Html5移动端页面自适应布局详解(rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  3. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  4. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

  5. 移动端页面使用单位的问题：关于px、百分比、em、rem开发中逐渐转换的问题记录

    开始写前端页面也有了快两年时间,从一开始的懵逼到现在的淡定,但是不能改变我还是一只小菜鸟的事实,平时遇到的一些问题都会记录在文件夹里,现在都整理一下大家一起分享自己平时也翻翻看看~ 不知道大家平时写的 ...

  6. jQuery-瀑布流-绝对定位布局（二）(延迟AJAX加载图片)

    jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)   瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一 ...

  7. 移动端自适应rem 布局篇

    相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...

  8. 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  9. 【移动端 Web】怎么循序渐进地开发一个移动端页面

    1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...

随机推荐

  1. java zip工具类

    依赖jar :apache-ant-1.9.2-bin.zip import java.io.File; import java.io.FileInputStream; import java.io. ...

  2. Hadoop常见异常及其解决方案

    1.Shell$ExitCodeException 现象:运行hadoop job时出现如下异常: 14/07/09 14:42:50 INFO mapreduce.Job: Task Id : at ...

  3. 让操作javascript对象数组像.net lamda表达式一样

    让操作javascript对象数组像.net lamda表达式一样 随着web应用程序的富客户端化.ajax的广泛使用及复杂的前端业务逻辑.对js对象数组.json数组的各种操作越来越多.越来越复杂. ...

  4. ipython的notebook

    ipython是增强的python交互式shell.而notebook是在浏览器上运行ipython ubuntu下安装: sudo apt-get install ipython3 sudo apt ...

  5. HDU 1172 猜数字（DFS）

    猜数字 Time Limit:10000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  6. mysql在linux上重启

    如何启动/停止/重启MySQL 一.启动方式 1.使用 service 启动:service mysqld start 2.使用 mysqld 脚本启动:/etc/inint.d/mysqld sta ...

  7. Service、Alarm与BroadcastReceiver的使用方法

    1:定义一个服务类,在服务类中使用AlarmManager 来管理服务的运行 public class WtacService extends Service{ private AlarmManage ...

  8. C语言经典算法100例

    [程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. ...

  9. 线程池之ThreadPool类与辅助线程 - <第二篇>

    一.CLR线程池 管理线程开销最好的方式: 尽量少的创建线程并且能将线程反复利用(线程池初始化时没有线程,有程序请求线程则创建线程): 最好不要销毁而是挂起线程达到避免性能损失(线程池创建的线程完成任 ...

  10. WPF 利用子线程弹出子窗体的研究

    一般来说子线程都是用来处理数据的,主窗体用来实现展现,但是有些时候我们希望子窗体实现等待效果,遮挡主窗体并使主窗体逻辑正常进行,这个业务需求虽然不多,但是正好我们用到了,于是我打算把研究成果写在这了. ...