我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。
今日学习目标
按照昨天的基于稿定设计的模板，做了h5 邀请函效果实现基础实现，今天主要就是基于实现，再补充学习浏览器默认样式清除。
昨天基础体验了一下，移动调试窗口效果，也有些好奇移动页面开发相关知识，加油，小又又！！！！
今日学习概要
通用浏览器样式清除
- 昨天的使用到的样式清除总结
- 理解
reset.css中语法含义
移动页面开发基础
- 移动页面和 pc 设计不同之处
- 媒体查询基础了解
浏览器样式清除
使用过的清除样式总结
之前搜过一个reset.css文件，然后昨天写页面的时候，也引入了~~~~~
但是！！！！，浏览器默认渲染的label框，input框和按钮样式有些丑，不但默认有边框线，宽度也很小。
input{
border: 2px solid rgb(234, 234, 234);
color: rgb(117, 117, 117);
height: 32px;
margin: 0.5em 0;
padding: 0 1em;
border-radius: 4px;
width: 90%;
box-sizing: content-box;
}
label{
color: rgb(117, 117, 117);
}
.btn{
background-color: #FF3028;
color: #fff;
border: 0 none;
height: 32px;
margin: 0.3em 0;
padding: 0 1em;
border-radius: 4px;
width: 90%;
box-sizing: content-box;
}
在实战的时候，是有使用前置选择器的，这边示例，就将前置选择器去掉了，之前有学习
css 规范中一定要注意不要做全局污染，所以，说明一下~~~~
规范样式清除文件
WHY
- 某些标签的默认样式不符合我们的设计要求
比如说a标签，默认它是有一条下划线，并且字体颜色也让人觉得很难看，所以我们需要清除它默认的样式，同时根据要求给它重新添加自定义样式。如图是 a 标签的默认样式。
- 各浏览器默认的样式各不同，所以会影响到我们的开发
因为在每次开发之前应该先对浏览器的默认样式进行一次清除，让每个浏览器保持一致的初始化样式。清除默认样式可以提高代码浏览器间的兼容性，同一个标签用在不同的浏览器中，默认样式可能不一样。
比如说，行高在某个浏览器中是1，在另一个浏览器中可能是1.1，这样在布局的时候会得到两种不同的效果，从而带来兼容性问题。
因此，统一清除标签的默认样式，再统一重新添加新的样式，就能避免这种问题。
HOW
还是要好好理解一下，下载的reset.css~~~~~
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }/* 清除这些 block 元素的默认间距，注意不要使用 *{margin:0; padding:0;}，这样会清除所有的间距*/
body { background:#fff; color:#555; font-size:14px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; }/* 设置页面body元素的默认背景颜色和字体相关样式，方便统一控制页面所有字体效果*/
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}/* 有样式标签默认的加粗效果清除*/
/* 默认a 链接效果清除*/
a { text-decoration:none; }
a:hover { text-decoration:none; }
img { border:none; }/* 默认图片边框效果清除*/
ol,ul,li { list-style:none; }/* 默认列表项效果清除*/
table{border-collapse:collapse;border-spacing:0;}/* 表格边线效果默认是分开的效果，如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。*/
/* 默认浮动清除*/
.clearfix::after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}/* 对于语义化标签默认设置显示为block*/
发现没有涉及到input和button的样式优化~~~，可能这两个不属于样式重置需要实现的效果。
移动页面基础了解
移动与PC 开发不同
这个是看的一个博客的文章~~~~
基础说明
PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是
android手机，还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是
hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。在布局上，移动端开发一般是要做到布局自适应的，一般使用
rem布局。在动画处理上，
PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，
title、description、icon等图标的配置，这些还是要会的。百度地图的一些
API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。一般
PC端用jquery，移动端用zepto，因为移动端的流量还是比较重要的，所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。未压缩的jquery是262kb，压缩的jquery是83kb。未压缩的zepto是54kb，压缩的zepto只有9kb。
布局注意事项~~~~
PC端和移动端的布局的思路还是比较不同的。如果最初没有考虑好移动端布局的思路，在后期兼容性等完善过程中将会超级痛苦。
在PC端我们很常见的一种布局思路如下：将网页主题设为固定宽度，居中，并定义最小宽度，可适配各种大小的PC端屏幕。由于PC端可视范围较大，所以上述方法可行，但是移动端完全不同，移动端的屏幕本身就比较小，所以我们必须全部利用起来。移动端的页面一般来说结构都会比较简单，下面分结构介绍两种布局：
- 居中
一般banner或者按钮等元素都会定义为居中布局。在ps中量好外边距后，直接给元素设置margin，如：margin: 0 10px; 无需设置宽度，元素会自动撑开，且在任何屏幕上都会有相同10px的左右外边距。
- 多个元素水平排列
如果有四个元素需要水平排列，怎样做到在任何移动端都能够漂亮的排列呢？很简单，将每个元素都设置成25%的宽度并居中，就能达到上述的效果。
比较复杂一点的，如果是六个元素呢？经过简单的计算，每个元素都定义为16%的宽度，这样总共是16%*6=96%``，剩下的4%再给两边的元素各加2%的外边距就ok`了。
如果你想实现更加完美的效果，比如使图片跟随手机屏幕的大小变化，则可以给图片设置相对宽度，并使高度自动伸缩，则可以达到以上效果。
HTML5标签的使用
在开始编写webapp时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5，可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量。
当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。
放弃CSS float属性，使用flax布局
在项目开发过程中可以会遇到内容排列显示的布局，假如你遇见这样的视觉稿，建议你放弃float，可以直接使用display:inline-block。或者使用flax布局。
自适应布局模式
在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。
学会使用
webkit-box
上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？
很感谢webkit为display属性提供了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活控制。
如何解决盒子边框溢出
当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式。
但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小，包括边框的宽度。
移动端
click屏幕产生200-300 ms的延迟响应
移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。它的解决方案有：
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
- 1、ontouchstart
- 2、ontouchmove
- 3、ontouchend
- 4、onclick
解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应
ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。
文字垂直居中
在PC端开发时，比较常用的方法为设置相同的height与line-height。但是在移动端，如果在某些容器中使用此类方法，你会发现文字在某些机型上跑偏了二里地。
从这个现象可以看出，移动端的浏览器对于css的解析确实没有PC端完善。原来以为IE三兄弟（IE6、IE7、IE8）是最坑的了，没想到被移动端的无数个兄弟完爆了。
言归正传，如何解决上述问题呢？微信采用的是在需要垂直居中的容器外套一层div，使用盒模型强制将其内部容器垂直居中。
另外就是在input中尽量不使用line-height，避免引起placeholder垂直位置偏移。
空
div在低端安卓显示不出来问题
在开发过程中发现了这样一个奇怪的问题：有些无内容的容器已经设置了高度与宽度，也设置了背景图，但是在安卓低端机上就是无法显示。
暂时解决是将高度或宽度换成对应的padding，将容器撑起来。
媒体查询了解
昨天在实现页面的时候，发现稿定设计页面用到了这个，所以今天想了解一下~~~~
媒体查询相关关键词
@mediaonlyscreenand
- only(限定某种设备)
- screen 是媒体类型里的一种
- and 被称为关键字，其他关键字还包括 not(排除某种设备)
常用类型
| 类型 | 解释 |
|---|---|
| all | 所有设备 |
| braille | 盲文 |
| embossed | 盲文打印 |
| handheld | 手持设备 |
| 文档打印或打印预览模式 | |
| projection | 项目演示，比如幻灯 |
| screen | 彩色电脑屏幕 |
| speech | 演讲 |
| tty | 固定字母间距的网格的媒体，比如电传打字机 |
| tv | 电视 |
ps:screen 一般用的比较多，但是还有其他常用的设备的尺寸，然后给页面分了几个尺寸的版本。
常用设备
| 设备 | 屏幕尺寸 |
|---|---|
| 显示器 | 1280 x 800 |
| ipad | 1024 x 768 |
| Android | 800 x 480 |
| iPhone | 640 x 960 |
两种方式
/*
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时，应用styleB.css
*/
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
.class {
background: #ccc;
}
}
这个技能好神奇~~~~
媒体查询相关关键词
device-aspect-ratio
device-aspect-ratio 可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为 4:3 的普通屏幕定义一种样式，然后对于 16:9 和 16:10 的宽屏，定义另一种样式，比如自适应宽度和固定宽度：
@media only screen and (device-aspect-ratio:4/3)
-webkit-min-device-pixel-ratio 的常见值对比（是设备上物理像素和设备独立像素，设备像素比率）
| 设备 | 分辨率 | 设备像素比率 |
|---|---|---|
| Android LDPI | 320×240 | 0.75 |
| Iphone 3 & Android MDPI | 320×480 | 1 |
| Android HDPI | 480×800 | 1.5 |
| Iphone 4 | 960×640 | 2.0 |
-webkit-min-device-pixel-ratio: 1.0
所有非 Retina 的 Mac
所有非 Retina 的 iOS 设备
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
其他设备
-webkit-min-device-pixel-ratio 为 1.3
Google Nexus 7
-webkit-min-device-pixel-ratio 为 1.5
Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation
-webkit-min-device-pixel-ratio 为 2.0
iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X
-webkit-min-device-pixel-ratio: 3.0
1.HTC Butterfly
2.Sony Xperia S
这么多机型~~~~~~
@media only screen and (min-resolution:144dpi)<resolution>（分辨率）
使用于：位图媒体类型,接受max/min前缀：
resolution媒体特性描述输出设备的分辨率，例如，像素密度。若查询设备的非方形像素，在min-resolution查询中指定的值必须与最稀疏尺寸进行比较，在max-resolution查询中必须与最密集尺寸进行比较。对于resolution（没有min-或max-前缀）查询从不查询设备的非方形像素。
对于印刷机，相当于分辨率（任意颜色的绘制点的分辨率）。
举例说明：该媒体查询表示样式表适用于分辨率大于每英寸 144 点的设备：
@media print and (min-resolution: 144dpi) { … }
今日学习名词
| 名称 | 名词解析 |
|---|---|
| 像素密度 | Pixels Per Inch也叫像素密度，所表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高 |
| fastclick | 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。 |
今日学习总结
今日心情
今天主要来说就是学习浏览器默认样式清除和移动页面开发相关知识，更期待明天的实战了~~~
本文使用 mdnice 排版
