移动端重置

移动端
1.meta声明：还有很多meta声明，常用的筛选过，基本这些；
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

<!-- Apple IOS原生浏览器 -->
<!-- 添加到主屏后设置状态栏的背景颜色； -->
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
<!-- 忽略数字自动识别为电话号码； -->
    <meta name="format-detection" content="telephone=no" />
<!-- 忽略数字自动识别为邮箱 -->
    <meta name="format-detection" content="email=no">
<!-- 启动WebApp全屏模式； -->
    <meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 百度 -->
<!-- 通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- QQ -->
<!-- 设置锁定横屏、竖屏显示模式，portrait（横屏），landscape（竖屏）-->
    <meta name="x5-orientation" content="landscape">
<!-- 设置全屏显示页面 -->
    <meta name="x5-fullscreen" content="true">

<!-- 360 -->
<!-- 设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。 -->
    <meta name="renderer" content="webkit">
<!--     360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

<!-- uc -->
<!-- 1.设置屏幕方向：portrait为横屏，landscape为竖屏； -->
　　<meta name="screen-orientation" content="landscape">
<!-- 2.设置全屏； -->
　　<meta name="full-screen" content="yes">

    <title>Document</title>
</head>
<body>
    
</body>
</html>

 


/* 1、重置样式*/

 

<style>
   *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

   :root{
      /*在CSS3中，:root选择器用于选择文档的根元素。根元素指的是位于文档树中最顶层结构的元素。在HTML中，根元素永远是HTML;
      等价于html{};*/
   }
   html{
      font-size:62.5%;
      -webkit-text-size-adjust:100%; /*关闭字体大小自动调整功能*/
      -ms-text-size-adjust:100%;
      touch-action:manipulation;/*取消双击放大，避免300ms的延迟，不过FF不支持；*/
   }
   /*需要注意的是，  :root 选择符（伪类）的 优先级 大于  html 选择符*/
   html *{
      margin:0;padding:0;outline:0;
      -webkit-tap-highlight-color:rgba(0,0,0,0);  /*去除点击时出现的边框；*/
      -webkit-text-size-adjust:none;  /*解决当<12px,chrome中仍然显示12px的问题;*/
   }
   title{
      width:100%;text-align:center;display:block;
   }
   html,body{ 
      /*禁止选中文本*/
      -webkit-user-select:none;-ms-user-select:none;user-select:none;
      height:100%; /*如果  <body> 及其子元素的高度需要设置为窗口高度时，  <html> 元素上也需要添加*/
      /*使用无衬线字体*/

      font-family:"Helvetica Neue",Helvetical,STHeiTi,sans-serif;
      /*iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878)，*/
      /*但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁。*/
      /*原生Android下中文字体与英文字体都选择默认的无衬线字体.*/

   }
   body{
      font-size:1.4rem;
      /*可以让页面在Native端滚动时模拟原生的弹性滚动效果*/
      -webkit-overflow-scrolling:touch;

   }

   body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
   address,article,aside,details,figcaption,figure,footer,header,menu,nav,section,summary{display:block;}
   audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}

   /*a{outline:0;cursor:pointer;*star:expression(this.onbanner=this.blur());}*/
   /*expression已被废弃，可以忽略*/
   a,img{

      -webkit-touch-callout:none;  /* 禁止长按链接与图片弹出菜单,在ios可以禁用系统的默认菜单*/
   }

   img{border:none;vertical-align:middle;}

  a{
      outline:0;cursor:pointer;text-decoration:none;
      -webkit-tap-highlight-color:transparent; /*使点击时的高亮背景变成透明色*/
  }
   a:link,a:active,a:visited{text-decoration:none;}

   li,ol{list-style:none;}

   table{border-collapse:collapse;border-spacing:0;}
   td,th{padding:0;}
　　textarea{overflow:auto;
　　　　　　　reaize:vertical;/*可调整元素高度*/
   }
   input,select,textarea{outline:none;border:none;background:none;}
   button,input,textarea{
      -webkit-user-select:text;-ms-user-select:text;user-select:text;/*text为可选文本，none为不可选文本*/
      -webkit-appearance:none;/*常用于ios，禁用系统原生按钮样式*/
   }
   button,select{
      text-transform:none; /*定义文本的大小写状态，此属性对中文无意义*/
      /*capitalize: 首字母大写 ;uppercase: 大写 ;lowercase: 小写 ;none: 正常无变化 ;inherit: 继承*/
   }
   button,html input[type="button"],input[type="reset"],/*重置按钮*/input[type="submit"]{
      cursor:pointer;
   }

   hr{ 
      /*宽度和高度分别应用到元素的内容框;在宽度和高度之外绘制元素的内边距和边框。*/
      -moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;
      height:0;
   }

   /*字体*/
   h1{font-size:1.8rem;}
   h2{font-size:1.6rem;}
   h3{font-size:1.4rem;}
　　h1,h2,h3,h4,h5,h6,small{font-style:normal;font-weight:normal;}
   b,strong{font-weight:bold;}
   em,i{font-style:normal;}
   button,input,select,textarea{font-family:"Helvetica Neue",Helvetical,STHeiTi,sans-serif;}
   /*颜色*/
   input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc;}
   input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc;}/*注意它是一个冒号，textarea里面用的是input*/
   input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc;}

   /*2、简化样式*/
   .clear{
      clear:both;/*清除浮动*/
   　　height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;
   }
   .fl{float:left;}
   .fr{float:right;}
   body{ margin:0 auto;max-width:640px; min-width:320px;color:#555; padding-bottom:8%;background:#fef9f1;}
   input,textarea{font-size:1rem;line-height:1.5rem;}
</style>
 
 /* 3、可选样式*/
　　-软键盘类型：
　　　　input[type=tel] //手机号
　　　　input[type=number] //数字
　　　　input[type=search] //搜索
 
底部
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
 
拓展：
在 JavaScript 中同样存在区别，例如  html 对应  document.documentElement 、  body 对应  document.body
 
说明：
hgroup标签已经被h5废除；
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

<!-- Apple IOS原生浏览器 -->
<!-- 添加到主屏后设置状态栏的背景颜色； -->
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
<!-- 忽略数字自动识别为电话号码； -->
    <meta name="format-detection" content="telephone=no" />
<!-- 忽略数字自动识别为邮箱 -->
    <meta name="format-detection" content="email=no">
<!-- 启动WebApp全屏模式； -->
    <meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 百度 -->
<!-- 通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- QQ -->
<!-- 设置锁定横屏、竖屏显示模式，portrait（横屏），landscape（竖屏）-->
    <meta name="x5-orientation" content="portrait|landscape">
<!-- 设置全屏显示页面 -->
    <meta name="x5-fullscreen" content="true">

<!-- 360 -->
<!-- 设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。 -->
    <meta name="renderer" content="webkit">
<!--     360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

<!-- uc -->
<!-- 1.设置屏幕方向：portrait为横屏，landscape为竖屏； -->
　　<meta name="screen-orientation" content="landscape">
<!-- 2.设置全屏； -->
　　<meta name="full-screen" content="yes">

    <title>Document</title>
    <style>
            *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
        html{
            font-size:62.5%;
            -webkit-text-size-adjust:100%;
            -ms-text-size-adjust:100%;
            -ms-touch-action:manipulation;
            touch-action:manipulation;
        }
        html *{
            margin:0;padding:0;outline:0;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            -webkit-text-size-adjust:none;
        }
        title{
            width:100%;text-align:center;display:block;
        }
        html,body{
            -webkit-user-select:none;-ms-user-select:none;user-select:none;
            height:100%;
            font-family:"Helvetica Neue",Helvetical,STHeiTi,sans-serif;
        }
        body{
            font-size:1.4rem;
            -webkit-overflow-scrolling:touch;
        }
        body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
        address,article,aside,details,figcaption,figure,footer,header,menu,nav,section,summary,img{display:block;}
        audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}
        a,img{
            -webkit-touch-callout:none;
        }
        input,img{border:none;vertical-align:middle;}
        a{
            outline:0;cursor:pointer;text-decoration:none;
            -webkit-tap-highlight-color:transparent;
        }
        a:link,a:active,a:visited{text-decoration:none;}
        table{border-collapse:collapse;border-spacing:0;}
        td,th{padding:0;}
        textarea{overflow:auto;reaize:vertical;}
        input,select,textarea,button{outline:none;border:none;background:none;}
        button,input,textarea{
            -webkit-user-select:text;-ms-user-select:text;user-select:text;
            -webkit-appearance:none;
        }
        button,select{
            text-transform:none;
        }
        button,html input[type="button"],input[type="reset"],input[type="submit"]{
            cursor:pointer;
        }
        hr{
            -moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;
            height:0;
        }
        /*字体*/
        h1{font-size:1.8rem;}
        h2{font-size:1.6rem;}
        h3{font-size:1.4rem;}
        h1,h2,h3,h4,h5,h6,small{font-style:normal;font-weight:normal;}
        li,ol{list-style:none;}
        b,strong{font-weight:bold;}
        em,i{font-style:normal;}
        button,input,select,textarea{font-family:"Helvetica Neue",Helvetical,STHeiTi,sans-serif;}
        /*颜色*/
        input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc;}
        input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc;}
        input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc;}
        /*2、简化样式*/
/*        .clear{
            clear:both; 
        　　height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;
        }*/
        .fl{float:left;}
        .fr{float:right;}
        body{ margin:0 auto;max-width:640px; min-width:320px;color:#555; /*padding-bottom:8%;*/background:#fef9f1;}
        /*input,textarea{font-size:1rem;height:1rem;padding:2rem 0;}*//*input是in注意这里不能给line-height，否则上下就无法对其,height等于文字大小，
        是为了光标与文字对其，光标高度一般与font-size有关。*/


html,body,.box{
            height:100%;
        }
        .box{
            display:-webkit-flex;
            display:flex;
            flex-direction:column;
            font-family:"microsoft yahei";
            font-size:18px;
            width:100%;
        }
        .box .header{
            height:40px;
            line-height:40px;
            text-align:center;
            background:#3498DB;
            color:#fff;
        }
        .box .body{
            width:100%;
            display: block;
            border-bottom:1px solid #eee;
            overflow:auto;
            flex:1;
            padding-bottom:10px;
        }
        .box .send-left {
            align-self:flex-end;
            margin-top:10px;
            position:relative;
/*            height:35px;*/
            background:#F8C301;
            border-radius:5px; /* 圆角 */
            line-height:28px;
            margin-right:16px;
            margin-left:16px;
            padding:0 10px;
            float:left;
        }
        .box .send-left .arrow {
            position:absolute;
            top:5px;
            left:-15px;
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:#fff #F8C301 #fff #fff;
        }
        .box .send {
            align-self:flex-end;
            margin-top:10px;
            position:relative;
         /*   height:35px;*/
            background:#9dd4f2;
            border-radius:5px; /* 圆角 */
            line-height:28px;
            margin-right:16px;
            margin-left:16px;
            padding:0 10px;
            float:right;
        }
        .box .send .arrow {
            position:absolute;
            top:5px;
            right:-15px;
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:#fff #fff #fff #9dd4f2;
        }
        .box  .clear{
            clear:both;
        }
        .box .footer{
            height:40px;
            line-height:40px;
            display:-webkit-flex;
            display:flex;
        }
        .box .footer input{
            flex:auto;
            border:none;
            border-right:1px solid #eee;
            font-size:18px;
            padding-left:4px;
        }
        .box .footer button{
            width:50px;
            font-size:18px;
        }
    </style>
</head>
<body>
    <!--
    容器属性
        flex-direction
        flex-wrap
        flex-flow
        justify-content
        align-items
        align-content
    项目属性：
        order
        flex-grow
        flex-shrink
        flex-basis
        flex
        align-self
    -->
    <div class="box">
        <div class="header">
            消息
        </div>
        <div class="body">
            <div class="send-left">
                你好！
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                   nihao
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send-left">
                周末去玩不
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                好呀
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                去哪儿
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                太远的地方就算了，明天还要上班，晚上准备好好吃一顿，现在秋天了，还得准备长秋膘了，冬天就不冷了，明天就要上班了，就没有时间做好吃的了。
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send-left">
                哎呀呀，真麻烦，那就去河坊街吧！
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                不想去。。。
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send-left">
                那就去西湖，西溪湿地，动物园，嗯，还有北高峰，这些可都没有出省的啊，算是比较近的了，要是人少的话，估计那些地方就一般了，再不然就是到附近的影院看看电影了。
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                👌就这么定了。
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                然后，抽风中
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
            <div class="send">
                来啊， 哈哈
                <div class="arrow"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="footer">
            <input type="text">
            <button>发送</button>
        </div>
    </div>    
</body>
<script>
    
</script>
</html>

 补充：

input[type="checkbox"]{vertical-align:middle; margin-top:0;}

 

 

posted @ 2016-10-28 16:23  最爱小虾  阅读(1240)  评论(0)  编辑  收藏  举报