学习日记day8：移动端页面流程优化

2022-11-09 09:01:07

一：切图

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/

码农公寓

相关文章