转行学前端的第 16 天 : 样式清除知识点补漏和移动页面开发基础了解

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时刻转行前端。

今天学习方针

按照昨日的依据稿定规划的模板，做了h5 邀请函效果完成根底完成，今天首要便是依据完成，再弥补学习浏览器默许款式铲除。

昨日根底体会了一下，移动调试窗口效果，也有些猎奇移动页面开发相关知识，加油，小又又！！！！

今天学习g | w 6 t X H P #概要

通用浏览器款式铲除

• 昨日的运用到的款式铲除总结
• 了解reset.css中语法含义

移动页面开发根底

• 移动页面和 pc 规划不同之处( I @ N i J O l 6
• 媒体查询根底了k Y R j t 8 ^ Q 解

浏览器款式铲除! x 3 T + 0 C

运用过的铲除款式总结

之前搜过一个reset.css文件，然后昨] . Q E日写页面的时分，也引进了~~~~~

可是！4 P @ w S 0 g！！！，浏览器默许渲染的label框，input框和按钮款式有些丑，不但默许有边框线，宽度也很小。

input{
border:2pxsolidrgb(234,234,234);
color:rgb(117,117,117);
height:32px;
margin:3 9 ,0.5em0;
padding:01em;
border-radius:4B ( 1 Mpx;
width:90%;
box-sizing:content-box;
}

label{
color:rgb(117,117,117x + t ? $ X b);
}

.btn{
background-color:#FF3028: ` B $ k S;
color:#fff;
border:0none;
height:32px;
margin:0.3em0;
padding:01em;
border-radius:4px;
width:90%;
box-sizing:conte4 B [nt-box;
}

在实战的时分，是有运用前置选择器的，这边Y ] # . Q ^ B = Y示例，就将前置选择器去掉了，之I r c v前有学习 css 规范 中一定要留意不要做全局污染，所以，阐明一下~~~~

规范款式铲除文件

WHY

• 某些标签的默许款式不符合咱们的规划要求

比方说a标签，默许它是有一条下划线，而且字体色彩也让人觉得很丑陋，所以咱们需求G 7 + Y铲除它默许的款式，一起依据要求给它重新增加自界说款式。如图是 a 标签的默许款式。

• 各浏览器默许的款式各不同，所以会影响到咱们的开发

由于在每次开发之前应该先对浏览器的默许款式进行一次铲除，让每个浏览器保持一致的初始化款式。铲除默许款式可以提高代码浏览器间的兼容性，同一个标签用在不同的浏览器中，默许款式或许不一样。

比方说，行高在某个浏览器中是1，在另一个浏览器中或许是1.1，这样在布局的时分会得到两种不同的效果，从而带来兼容性问题。S X d

因而，一致铲除标签的: 9 e h j _ G (默许款式，再一致重新增加@ = G ` & 9 + L s新的款式，就能防止这种问题。

HOW

仍是要好好了解一下，下载的reset.css~~~~~

bodyZ G 8  v n H +,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset* _ y a C,legend,input,bD p | :utton,textarea,p,blockquote,th,td{margiB i E z ! Zn:0;^ y e ` u b N U epadding:0;}/*铲除这些block元素的默许距离，留意不要运用*{margin:0;padding:0;}，这样会铲除一切的距离*/
body{bac B G w z s 9 C wkground:#fff;color:#555;font-size:14/ y A f Apx;font-W o / M G 2family:"MicrosoftYaHeS : Gi",Ar9 S c 7 t d Cial,Helvetica,sans-serif;}/*设置页面body元素的默许布景色彩和字体相关款式，方便一致操控页面一切字体效果*/
td,th,captioa 2 e 4 fn{font-size:14px;}
h1,h2,h3,h4,h5,h6{font-weight:normal n b Y 8 ] 3;font-size:100%;}p Y ^ - r ( U
input,textarea,select,button{font:14pxVerdana,Helvetica,Arial,sans-serif;}

address,caption,cite,code,dfn,em,strong,th,var{font-styleX O f  E & V:normal;fot [ * T ^ % ( ~ `nt-weight:normal;}/*有款式标签默许的加粗效果铲除*/v w * u
/*默许a链接效果铲除*/
a{text-decoration:none;}
a:hover{o = - ~ % ! Ytext-decoration:none;}
img{border:none;}/*默许图片边框效果铲除*/
ol,ul,li{list-styleW u 6 D ::none;}/*默许列N f = , p F z J l表项效果铲除*/
table{border-collapse:collapse;border-spacing:0;}/*表格边线效果默许是分开的效果，假如或许，边框会合并为一个单一的边框。会疏忽border-spacing和! S % -empty-d 5 Wcells特点。*/
/*默许起浮铲除*/
.clearfix::after{cont` K U ^ ^ p U Oent:".";displ( ( b kay:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}

header,footer,section,article,aside,nav,hgroup,address,figure,g P A ? ; +figcaption,menu,details{display:block;}/*关于语义化标签默许8 ( J ] = % c设置显现为block*/

发现没有涉及到in g & G M Knput和button的款式优化~~~，或许这两个不1 v . _ # j 8 ` +属于款式重置需求完成的效果。

移动页面根底了解

移动与PC 开发不同

这_ 8 ) 7 k m P个是看的一个博客的文章~~~~

根底阐明

• PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，由于现在不管是android手机，: – u X G S仍是ios手机，一般浏览器运用的都是webkit内核，所以说做移动端开发，更多考虑的应F i v . 4 3该是手机分辨率的适配，和` k f l不同操作体系的略微差异化。

• 在部分事情的处理上，移动端多出来的事情是触屏事情，而短少的是hover事情。 另外包含移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。

• 在布局上，移动端开发一般是要做到布局自适应的，一般运用rem布局。

• 在动画处理上，PC端由于要O @ 4 i v Q l Y考虑IE的兼容性，所以一般运用JS做动画的通用; K ] a q m /性会更好一些，可是CSS3做了很大的献身， 而在手机端: B , [，假如要8 1 { / 9 )做一些动画、特效等，榜首选择肯定是CSS3， 既简略、功率又高。

• 微信的一些接口组好能去} h v a完成一遍，了解一下肯定是有好处的，比方经过微信共享文章，titlet 4 U V ~ | 5 P、de0 J ^scrx ! ription、icon等图标的配置，这些仍是要会的。

• 百度地图的一些API! 9 9 a 1 I U接口，也得去完成一下，这些关于移动端来说，LBS是一个十分重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块现已是一个比较老练的渠道了，所以学起来也比较容易。

• 一般PC端用jquery，移动端用zepto，由于移动端的流量仍是比较重要的，所以引进的资源或许插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别仍是挺大的。未紧缩的jquery是262kb，紧缩的jquery是83kb。未紧缩的zepto是54kb，紧缩A C O的zepto只有9kb。

布局留意事项~~~~

PC端和移动端的布局的思路仍是比较不同的。假如最初没有考虑好6 Y ( o q ; 8 W p移动端布局的思路，在后期兼容性等完善过程中将会超级痛苦。

在Pv d C . ) h mC端咱们很常见的一种布局思路如下：将网页} P x主题设为固定宽度，居中，并界说最小宽度，可适配各种巨细的PC端屏幕。由于PC端可视规模较大，所以上述办法可行，可是移动端彻底不同，移a P } ) J 2动端的屏幕自身就比较小，所以咱们有必要悉数运用起来。移动端的页面一般来说结构都会比较简略，下面分结构介绍两种布局：

• 居中

一般banner或许按钮等元素都会界说为居中布局。在ps中量好外边距后n C u，直接给元素设置margin，如：margin: 0 10px;M q d } T q 无需设置宽度，元素会自动撑开，h % @ e & ? d 7 $且在任何屏幕上B $ Z . p ` D c都会有相同10px的左右外边距。

• 多个元素水平摆放

假如有四个元素需求水平摆放，怎样做到在任何移动端都可以漂亮的摆放呢？很简略，将每个元素都设置成25%的宽度并居中，就能到达上述的效果。
比较复杂一点的，假如是六个元素呢？经过简略的计算，每个元素都界说为16%的宽度，这样总共是16%*6=96%``，剩下的4%再给两边的元素各加2%的外边距就ok`了。
假如你想完成愈加t f 6 m | } z & @完美的效果，比方使图片跟从手机屏幕的巨细改变，则可以给图片设置相对宽度，并使高度自动伸缩，则可以到达@ X H A ) f g以上效果。

HTML5标签的运用

在开始编g a B r L 6 B U写webapp时，主张前端工程师运用HTML5，而放弃HTML4，由于HTML5，可以完成一a . ] r些HTML4中无法完成的丰厚的WEB运用程序的体会，可以减少x . 5 a # B开发者许多的工作量。

当然了你决议运用HTML5前，一定要对此十分了解，要知道HTML5的新标签的效果。比方界说一块内容或文章J W L区域可运用section标签，界说导航条或选项r ? k ^ N卡可以直接运用nav标签等等。

放弃CSS float特点，# K d u u , i运用flax布局

在项8 g t 3目开发过程中可以会遇到内容摆放显现的布局，假如你遇见这样的视觉稿，主张你放弃float，可以直接运用display:inline-block。或许运用flax布局。

自适应布局形式

在编写CSS时，: b 0 6 j我不主张前端工程师把容器（不管是外层容器仍是内层）的宽度定死。为到达适配各种手持设备，我主张前端工程师运用自适应布局形式（支付宝采用了自适应布局形式），由于这样做可以让你的页面在ipad、itouch、ipo1 ) Yd、iphone、android、web safarik、chrome都可以正常的显现，你无需再次考虑设备的分辨率。

学会运用webF V U 8kit-box

上一节，咱们说过自适应) r a R 3布局形式，有些同学或许会问：怎么在移动设备上做到彻底自适应呢？

很感谢webkit为display特点 o 8 x S c l供给了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活操控。

怎么处理盒子边框溢出

当你指定了一个块级元素时，5 G _ A而且为其界说了边框，设置了其宽度为100％。在移动设备P ] @ U 6开发过程中咱们一般会对文本框界说为宽度100％，将其界说为块级元素以完成全屏自适应的款式。

但此刻你会发现，该元素的边框(左右)各1个像素会溢了文档，导致呈现横向滚动条，为处理这一问题，咱们可以为其增加一个特殊的Z j 3 V / – {款式C , Z { m J k-webkit-box-sizing:border-boU 5 7 K z / + - Mx;用来指定该盒子的巨细，包含边框的宽度。

移动端click屏幕产生200-300 ms的推迟呼应

移动设备上的web网页是有300ms推迟的，往往会造成按钮点击推迟甚至是点击失效。它的处理方案有：

fastclick可以处理在手机上点击事情的300ms推迟

zepto的v r a k [ W L 9 |touch模块，tap事情也是为了处理在click的推迟问题

触摸事情的呼应顺序

• 1、ontouchstart
• 2、ontouchmove
• 3、ontouchend
• 4、onclick

处理300ms推迟n ? &的问题，也可以经过绑定ontouchstart事情，加快对事情的呼应

ios体系中元素被触摸时产生的半透明灰色遮罩怎样去掉

ios用户点击一个链接，会呈现一个半透明灰色遮罩C K d j, 假如想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也便是特点值的最终一位设置为0就可以去除半透明灰色遮罩。

文字笔直居中

在PC端开发时，比较常用的办法为设置相同的height与line-height。可是在移动端，假如在某些容器中运用此; D { Q – u类办法，你会发现文字在某些机型上跑偏了二里地。

从这个现象可以看出，移动端的浏览器关于css的解析的确没有PC端完善。本来认V p E { n 7 C S 5为IE三兄弟（IE6、IE7、IE8）是最坑的了，w 5 ? ^没想到被移动端的无数个兄弟完爆了。

言归正传，怎么处理上述问题呢？微信采用的是在需求笔直居中的容器外套一层div，运用盒模型强制将其内部容器笔直居中。

另外便是在input中尽量不运用line-heigh{ ? qt，防止引起placeholder笔直位置偏移。

空div在低端安卓显现不出` t i .来问题

在开发过程中发现了这样` . T [ T 9一个古怪的问题：有些无内容的容器现已设置了高度与宽度，也设置了布景图，可是在安卓低端机+ + 3 A上便是无法显现。

暂时处理是将高度或宽度换成对应的padding，将容器撑起来。

媒体查询了解

昨日在完成页面的时R 3 L L w分，发现稿定规划页面用到了这个，所以今天O l { O I s想了解& $ T 2 A 3 } u一下~~~~

媒体查询相关关键词 @medio z O x W g Qa only screen and

• only(限定某种设备)
• screen 是媒体类型里的一种
• an] O ? m o l qd 被称为关键字，其他关键字还包含 not(扫除某种设备)

常用类型

ps:screen 一般用p c k 5的比较多，可是还有其他常/ W s用的设备的尺度，然后给页面分了几个尺度的版别。

常用设备

两种方式

/*
<linkrel="stylesheet"type="text/css"href="hr X & x H dttps://juejin.im/post/5ea03cc v e G 1 J04518825739a1b15e8/styleB.css"media="screenand(min-width:600px)and(max-width:800px)">

意思是当屏幕的宽度大于600小于800时，运用stylex W 4 AB.css
*/

@mediascreei B u x E `  T Anand(max-width:600px){/*当屏幕尺度小于600px时，8 a p o运用下面的CSS款式*/
.class{
background:#ccc;
}
}

这个技术好神奇~~~~

媒体查询相关关键词 device-aspect-ratio

device-} ( o F 6 x j P Laspect-ratio 可以用来适配特定屏幕长宽比的设备，这也是一个很有用的特点，比方，咱们的页面想要对长宽比为 4:3 的普通屏幕界说一种款式，然后关于 1; b | N6:9 和 16:10 的宽屏，界说另一种款式，比方自适应宽度和固定宽度：

@mediaonlyscreenand(n n  * ^ e Sdevice-aspect-ratio:4/3)

-webkit-min-devicp ] i 5 S g & /e-pixel-ratio 的常见值比照（是设备上物理像素和设备独立像素，设备像素比率）

-webkit-min-device-pixel-ratio: 1.0

一切非 Retina 的- z 9 2 n ! 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 为2 & E ] b H Z 5 1.5

Google. t v Nexus S
Samsung GalT h C 9 D ) g O #axy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

-? b h 4 % 5 X Wwebkit-min-de[ p % ?vice-pixel-ratio 为 2.0

iPhone4 ( t 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
一切Retina displays 的MAC
Googled P V ] ` N ` Galaxy Nexu) w } 9 xs
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
S: 1 d s Z Wony Xperiad 7 @ * L [ d  S
HTC One X

-webkit-min-device-pixel-ratio: 3.0

 1.HTC Butte~ ^ n ( ? W 4 (rfly
2.Sony Xperia S

这么多机型~~~~~~

@mediv m U o S ) x ) ya only screen and (min-resolution:144dpi)<resolution>（分辨率）

运用于：位图媒体类型,承受max/min前缀：

resolution媒体特性描绘p o 3 3 9 s } 0 Q输出设备的分辨率，例如，像素密度。若查询设备的非方形像素，在min-rD 1 4 k cesolutin R Z x , , %on查询中指定的值有必要与最稀少尺度进行比j l ^较，在max-resolution查询中有必要与最密布尺度进行比较。关于resolution（没有min-或max-前缀）查询从不查询设备的非方形像素。

关于印刷机，相当于分辨率（g ^ *任意色彩的绘制点的分辨率）。

举例阐明：该媒体查询表明款式表适用于分辨率大于每英寸 144 点的设备：

@mZ ? qediaprintand(min-resolutio; & _ n:14- D 4 ? 0 L4dpi){…}

今天学习名词

今天学习总结

今天心情

今天首要来说便是学习浏览器默许款式铲除和移动页面开发相关知识，更等待明天的b v 0 l L实战了~~~

本文运用 mdnice 排版