一：切图

1：切那些（移动端能不用图片就不用图片；logo单独切因为要带链接）

2：普通切（快捷键：复制到新图层  选中 复制 新建 粘贴 保存）

　  3：类似切 （选中多个图层  矩形框多选  选择工具  垂直居中对齐）

4：格式 手机端支持png格式

二：重用代码

1：HTML头部； 2：css默认设置；3：js调整rem；

一个页面/首页，可以将三块代码写到一起，大项目建议分开。

<!DOCTYPE html>
<html lang="zh-CH">
<head>
    <meta charset="gb2312">
    <title>标题</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <style rel="stylesheet">
        body,h1,h2,h3,p,dl,dd,ol,ul,th,td,form,fieldset,input,button,textarea,li{margin:0;padding:0}
        body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,a,textarea,input,button,span,em,strong,img,div{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none; outline: none;}
        html{-webkit-text-size-adjust:none;word-wrap:break-word;background:#ffffff;font-family: Arial, Helvetica, sans-serif;}
        h1,h2,h3{font-size:100%}
        ol,ul{list-style:none}
        table{border-collapse:collapse;border-spacing:0;empty-cells:show;font-size:inherit}
        fieldset,img{border:0}cite,em,s,i,b{font-style:normal}
        input,button,textarea,select{font-size:100%; border: medium none;}
        body,input,button,textarea,select,option{font-size:normal}
        a,input,textarea{text-decoration:none;outline:0}
        li,img,label,input{vertical-align:middle}
        var{font-style:normal}
        ins{text-decoration:none}
        body{font-size:.28rem;color:#ffffff;}
        textarea{resize:none}
        a{color: #3c3c3c;}
    </style>
</head>
<body>
<!--structure s-->

<!--structure e-->
<script>
    !function(w){
        var doc=w.document,
                doc_e=doc.documentElement,
                max_w=720,
                d=max_w/100,
                resize="orientationchange"in w?"orientationchange":"resize",
                html_fon=function(){
                    var n=doc_e.clientWidth||320;
                    n>max_w&&(n=max_w);
                    doc_e.style.fontSize=n/d+"px";
                };
        if(doc.addEventListener) {
            w.addEventListener(resize, html_fon, false),
                    doc.addEventListener("DOMContentLoaded", html_fon, false)
        }
    }(window);
</script>
</body>
</html>

三：主体结构
   1：除了字体使用rem，其余大小尽量使用百分比;

   2: 相对定位控制文档流，绝对定位用在相对定位里面；position：relative按需添加。文档流可以用height：8rem撑起高度，按需添加。

   3: 最外层<div class="wrapper"></div>  .wrapper{max-width:720px; margin:0 auto; padding-bottom:1rem;}最后一个底部留白；
   4：结构块div h1 form; 例子<div class="header"></div> .wrapper .header{width:100%;}可在此处加height撑起高度。
   5：一般结构 <div class="header nav slide article list footer"></div>  <a href="javascript:;" target="blank"></a>
   6：字体居中：text-align:center; line-height:height;
四：调试
　　使用chrome调试手机版可自适应也可选各种机型调试。

五：压缩
　　压缩网址：https://tinypng.com/

学习日记day8：移动端页面流程优化的更多相关文章

  1. 学习日记day9: PC端页面流程优化

    <!DOCTYPE html><html lang="en"><head> <meta charset="gb2312" ...

  2. 移动端页面SEO优化需要注意的10个要点

    如今,移动互联网已经成为互联网组成的非常重要的一个分支,如果说以前对移动页面没有很规范的优化和高质量内容评判划分标准,但现在随着各大搜索引擎发布了移动建站指南,图文并茂的描述了如何提高移动站在百度质量 ...

  3. pwn学习日记Day8 基础知识积累

    知识杂项 aslr:是一种针对缓冲区溢出的安全保护技术,通过对堆.栈.共享库映射等线性区布局的随机化,通过增加攻击者预测目的地址的难度,防止攻击者直接定位攻击代码位置,达到阻止溢出攻击的目的的一种技术 ...

  4. 我的linux学习日记day8

    链接文件 linux中链接有两种,一种是硬链接,一种是软链接 一.硬链接 硬链接是指通过索引节点来进行链接创建硬链接的方法如下:ln 源文件 硬链接文件具有相同inode号的多个文件互为硬链接文件删除 ...

  5. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

  6. H5教程：移动页面性能优化

    随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情. 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状,移动页面布局越来越复杂,效果越来越炫,直接导致了文件越 ...

  7. 百度APP移动端网络深度优化实践分享(一)：DNS优化篇

    本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<一>DNS优化>,感谢原作者的无私分享. 一.前言 网络优化是客户端几大技术方 ...

  8. html5--项目实战-仿天猫（移动端页面）

    html5--项目实战-仿天猫(移动端页面) 总结: 1.标准搜索栏的做法:这里是弹性布局,放大镜和小话筒是background img 2.手机尾部导航做法:这是一个个 li 标签,每个li标签占% ...

  9. web页面性能优化

    web前端页面性能优化 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢? 其实应该是属于功能的表现.并且影响用户访问 ...

随机推荐

  1. CPU和GPU实现julia

    CPU和GPU实现julia           主要目的是通过对比,学习研究如何编写CUDA程序.julia的算法还是有一定难度的,但不是重点.由于GPU实现了也是做图像识别程序,所以缺省的就是和O ...

  2. TCP数据流稳定性－－TCP分片,重组及乱序

    http://www.cnblogs.com/derekchen/archive/2009/07/15/1524415.html 1.IP分片的情况.IP软件包有一个［分片］和［重组］模块,一个IP数 ...

  3. Reflection实现通用增删改

    新增 /// <summary> /// 通用新增方法 /// </summary> /// <param name="arr">一行数据封装的 ...

  4. nn package

    1.nn模块是神经网络模块 2.父类module,子类Sequential, Parallel和Concat 3.Linear:做线性变换 4.criterion 这个模块包含了各式各样的训练时的损失 ...

  5. java提高篇---Iterator

    迭代对于我们搞Java的来说绝对不陌生.我们常常使用JDK提供的迭代接口进行Java集合的迭代. Iterator iterator = list.iterator(); while(iterator ...

  6. Web的Ajax应用开发模式（一）——了解Ajax的使用形式

    寄语: 前天在查看一些公司的招聘要求时,看到有公司要求测试人员了解Ajax,故写此博文旨在帮助测试人员提高自身技术知识水平,愿与广大测试同胞共同进步.(欢迎纠错!!!) 图1: 图2:

  7. js修改浏览器url

    var stateObject = {};var title = "";var newUrl = "/";history.pushState(stateObje ...

  8. Python3基础 count 返回指定元素在列表中的个数

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  9. ruby学习总结05

    1.数值类(Numeric) 有理数:Rational(分子,分母) 复数:Complex(实数,虚数) 随机数:Rnadom   rand()  返回比1小的浮点数,rand(种子数)  返回0到该 ...

  10. netsh winsock reset 11003

    netsh winsock reset 11003 http://files.cnblogs.com/xsmhero/winsock.zip