一：切图

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. MySQL与SQL比较有那些区别呢

    MySQL是一个逐渐完善的过程,使用前期版本时会遇到一些问题,通常搞得莫名其妙,在版本选择上尽量选择最新的. 1.在5.03以前版本中,存储varchar型数据时,后面的空格会被忽视掉,前面的空格会保 ...

  2. 【转】Tomcat调优指南

    转载地址:http://blog.csdn.net/woohooli/article/details/3954792 1          概述 本文档主要介绍了Tomcat的性能调优的原理和方法.可 ...

  3. hihoCoder 数论五·欧拉函数

    题目1 : 数论五·欧拉函数 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho有时候会用密码写信来互相联系,他们用了一个很大的数当做密钥.小Hi和小Ho约定 ...

  4. css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]

    css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right ...

  5. Linux内存模型

    http://blog.csdn.net/sunyubo458/article/details/6090946 了解linux的内存模型,或许不能让你大幅度提高编程能力,但是作为一个基本知识点应该熟悉 ...

  6. error: command 'x86_64-linux-gnu-gcc' failed with exit status 1

    转载自:http://blog.csdn.net/wang1144/article/details/42277179 在ubuntu14.04版本上安装lxml,老是出错,在一番艰辛的搜索之后 ,终于 ...

  7. VS2015+Windows 10下配置opencv3.0

    博客园样式换了,原先的文章排版太乱了,新发一篇 ##0. 安装 opencv 3.0 首先去官网下载安装包(其实是个压缩包),释放到随便的一个路径里面为了方便描述,下面把这个路径称为 cvPath. ...

  8. 翻译之basename()

    NAME top basename, dirname - parse pathname components SYNOPSIS top #include <libgen.h> char * ...

  9. WF3.0 CallExternalMethod使用技巧

    CallExternalMethod用于工作流向宿主进程中通信 简单的介绍一下它的使用技巧,参照网上的一个questioner源码进行了改进,因为我感觉这个源码提供的通信demo过于繁琐. 看看ser ...

  10. PowerShell调用jira rest api实现jira统计自动化

    通过调用JIRA Rest web api实现统计自动化,首先进行登录模拟: $content = @{username='用户名';password='密码'} $JSON=$content|con ...