移动web开发相关笔记（一）

1.https://open.baidu.com/（百度数据开发平台）,http://lbsyun.baidu.com/index.php?title=car/api/weather（百度车联网API），这两个数据开发平台，一个是可以直接查，一个是有对应的api给你用。


2.https://www.bejson.com/（在线格式化json等工具资源站），这个网站有很多很实用很方便的工具（不是所有功能都有效），很好。


3.互联网正规的免费产品，都是先用免费的把你吸引过来，等你大量的需要的时候或者需要升级产品的时候，就开始收费了。


4.viewport（视口）既视图端口，也就是移动端真正能够看到页面的区域，当想要设置视口时可以通过 meta:vp+tab键进视口的设置，这emmet语法，这种视口的设置只在移动端的浏览器上有效果【
◆
◇width:设置layout viewport 的宽度，为一个正整数，或字符串"device-width"，如果给死的话就不太好，移动端开发都是给device-width。
◇initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
◇minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
◇maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
◇height:设置layout viewport 的高度，这个属性对我们并不重要，很少使用，高度一般不设置。
◇user-scalable:是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许。
】。


5.在html页面中输入lorem+tab键，就会随机产生一个单词，如果你想随机产生多个单词，那么可以使用lorem数量+tab键，如lorem100+tab键，机会随机产生100个单词，省得你复制黏贴相同的内容了。


6.取消或者设置移动端的点击时的高亮效果，移动端默认手指点击时会有高亮效果
◆-webkit-tap-highlight-color:transparent;/*点击时效果为透明的，于是就去掉了点击时的高亮效果*/


7.移动端在保证盒子的大小不变时会使用
◆box-sizing:boder-box;


8.在某些移动端浏览器上，会给input标签默认加上一些样式，就算你使用border=none,outline=none，也无法清除那些默认的样式，如立体效果，3d效果等，所以如果想清楚那些移动端上的默认样式，可以使用
◆-webkit-appearance:none;/*在移动端清除浏览器默认样式*/


9.最小宽度和最大的宽度，防止了移动设备在大尺寸的普通缩放失去清晰度和在小尺寸的屏幕中出现布局错乱的问题。
◆max-width:640px;/*在行业当中的移动端的设计图一般使用的是640px*/
◆min-width:300px;/*在移动设备当中现在最小的尺寸是320px*/


10.新的结构伪类选择器
◆div:first-of-type {}表示匹配父容器中所有子元素div中的第一个div
◆div:last-of-type {}表示匹配父容器中所有子元素div中的最后一个div
◆div:nth-of-type(n) {}表示匹配父容器中所有子元素div中的第n个div
◆div:nth-last-of-type(n) {}表示匹配父容器中所有子元素div中的倒数第n个div
★div:nth-child(n) {}表示在父容器中所有子元素中找到对应位置为n的div，如果位置n上不是div，那么就找不到了，div:nth-of-type(n) {}表示在父容器中找到所有子元素div然后选中其中的第n个div
◆nth-child和nth-of-type，前者仅仅是按照位置找，当元素和位置都是对应的时候才能找到，而后者是把所有符合的元素集合起来然后再进行查找挑选。


11.移动端的默认字体 sans-senf


12.视网膜屏幕
◆视网膜屏幕是由肉眼看不起的 最小的像素点组成
◆分辨率的最小单位是像素点
◆分辨率与像素点的关系是倍数的关系，如2倍的关系的移动设备有 inphoe（4、4s、5、5s、6、6s、６plus、6s puls
）
◆iphone5的分辨率是320*568，但是屏幕中的像素点是640*1136，所以屏幕分辨率与像素点的关系是2倍。
★2x的视网膜屏幕，分辨率与像素点的关系就是两倍，3x的视网膜屏幕，分辨率与像素点的关系就是三倍，由此类推，1x的视网膜屏幕，分辨率与像素点的关系就是一倍。


13.公司美工在准备图片时会准备多套以保证在不同的设备上能够正常显示图片，如2x的视网膜屏幕，你的图片是1x的视网膜的屏幕，显示时则会失真，因为图片被放大了，这时候你如果想不失真，只能将图片缩小一倍。


14.移动web上也会准备多张图片，低精度的图片放大会失真，高精度的图片缩小，依旧清晰，但是缩的太小你也看不清。