移动端
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;}
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
