一：切图

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. Xcode中设置按钮在十分钟之内禁用

    btn.enabled=NO;` NSTimer * notificationTimer = [NSTimer scheduledTimerWithTimeInterval:10*60.0 targe ...

  2. poj1961 Period

    我们考虑KMP算法中fail失配指针的意义. 对于一个模式串(Pattern),位置i对应的失配指针fail[i]是那个位置: 这个位置满足的条件是,子串[0, fail[i])是位置i(不含)的后缀 ...

  3. Inviting Friends(二分+背包)

    Inviting Friends Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...

  4. php编译器

    WordPress http://pan.baidu.com/s/1eQnOnv0 epp3: http://pan.baidu.com/s/1pJKFOD1 配合xampp: http://pan. ...

  5. javascript学习（一） 异常处理与简单的事件

    一:异常处理 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></ti ...

  6. WCF 下载“http://localhost:XXX”时出错。无法连接到远程服务器。由于目标计算机积极拒绝，无法连接。

    根据理论,WCF既然查找不到该地址 应该是没打开Service,或者说该端口被防火墙保护了,关了防火墙没解决,最后一试成功了. 我的服务端和客户端都位于一个解决方案中,当运行服务端时,则 [添加服务引 ...

  7. dubbo源码之四——服务发布二

    dubbo版本:2.5.4 2. 服务提供者暴露一个服务的详细过程 上图是服务提供者暴露服务的主过程: 首先ServiceConfig类拿到对外提供服务的实际类ref(如:HelloWorldImpl ...

  8. 【项目管理和构建】十分钟教程，eclipse配置maven + 创建maven项目（三）

    [项目管理和构建]十分钟教程,eclipse配置maven + 创建maven项目(三) 上篇博文中我们介绍了maven下载.安装和配置(二),这篇博文我们配置一下eclipse,将它和maven结合 ...

  9. FCKeditor使用方法技术详解

    转载自 http://www.cnblogs.com/cchyao/archive/2010/07/01/1769204.html 1.概述 FCKeditor是目前最优秀的可见即可得网页编辑器之一, ...

  10. BZOJ 2433 智能车比赛（计算几何+最短路）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2433 题意:若干个矩形排成一排(同一个x之上最多有一个矩形),矩形i和i+1相邻.给定两 ...