一：切图

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. htmlnav

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

  2. 测试-ConstantForce的驱动方式以及是否穿透

    当我把FixedUpdate更新频率设置为1秒一次,测试结果如下: 结论: 1.由物理更新驱动 2.不会产生穿透

  3. 为Apache配置虚拟机Virtual Host

    配置虚拟机最少需要修改两个文件,即httpd-vhosts.conf 和 hosts (记住修改任何配置前先备份哦,这才是个好习惯) 第一步,修改httpd-vhosts.conf文件, 文件路径 \ ...

  4. C#实现中国天气网XML接口测试

    点击链接查看中国天气网接口说明,最近想研究一下接口测试,源于最近一次和某公司的技术总监(交大校友)谈话,发现接口测试的需求是比较大的,于是想要研究一下. 好不容易在网上找到了一个关于中国天气网的接口说 ...

  5. 放松时刻——C#分割字符串

    让我们来练习一下字符串的分割~把话倒过来说: private void change_button_Click(object sender, EventArgs e) { var after_text ...

  6. Jquery中的filter()详细说明和transition的用法

    filter() 方法将匹配元素集合缩减为匹配指定选择器的元素. 详细说明 如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配元素的子集构造一个新的 jQuery ...

  7. ContentProvider官方教程(8)自定义MIME

    MIME Type Reference Content providers can return standard MIME media types, or custom MIME type stri ...

  8. nltk安装及wordnet使用详解

    环境:python2.7.10 首先安装pip 在https://pip.pypa.io/en/stable/installing/ 下载get-pip.py 然后执行 python get-pip. ...

  9. 没有必要去指定SqlSessionFactory或SqlSessionTemplate

    <!-- 自动注册mybatis mapper bean --><!-- 注意,没有必要去指定SqlSessionFactory或SqlSessionTemplate,     因为 ...

  10. winfrom增删改查

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...