这两天开始搞了搞前端, 这个领域现在内容也很多哈. 其实我最讨厌的就是飚术语, 但是, 没办法, 日常用语的准确性总是会有问题. 而且, 装逼也是马斯洛人类基本需求之一. 装逼也可以对抗艾宾浩斯遗忘曲线, 装逼还是格式塔基础.

###

  1. viewport如何使用.

疑问

  1. 下拉刷新对于web有点难?

移动web开发参考

  • http://am-team.github.io/amg/dev-exp-doc.html

viewpoint

meta的viewport
在无线Web开发中，在head头部遇到最常见的问题，就是viewport的设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>

对于这里面的设置，大家可以Google一下，有非常详细的叙述，我这里不太重复,以下有几个地址，大家可以做下参考 https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html 等，其实更加具体的，大家可以再overstackflow或者google进行查询。

自适应

移动端自适应, 很多看不懂需要相关阅读.

  • http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/#clue
  • http://web.jobbole.com/83527/

自适应方案

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<!--移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页
放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应缩小了
（980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没具体研究）。

关于  initial-scale=1 ，这个参照iphone5的尺寸320*568，如果你页面按照640*1136做的话，scale就设为0.5, 这个很有用, 因为视觉稿经常是x2的.-->

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    /*iphone 6*/
}
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    /*iphone 6 plus*/
}
/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*实际相当于14px*/} 
/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    html{font-size: 129.375px;}
}
/*img有个srcset属性, 可以决定加载的图片.
可以使用FLEXBOX布局来实现两端对齐的效果，也可以使用text-align:justify的方式实现。*/
element::-webkit-scrollbar{
   display: none;
}
/*如果要去除全部的滚动条，就把`element`去掉
同时这个属性可让在`div`里的滚动如丝般顺滑：`-webkit-overflow-scrolling : touch`; */
//布局, 水平布局, 目前都是flex了.
display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 过渡版本
display:-webkit-flex; // 最新的版本
/*使用rem布局时，由于webkit支持的最小字体大小是12px，所以使用html使用62.5%实际是12px，这样很难计算，我的做法是设置成625%即100px，然后1rem就相当于100px*/

调试

  • 移动端测试: http://yujiangshui.com/multidevice-frontend-debug/
  • 腾讯测试平台: http://wetest.qq.com/cloud/index.php/help/cloudindex

调试方案

  • 绑定hosts, 直接是用代理服务器, 呵呵, 本地dns有用了.
  • 使用chrome、safari、firefox、UC浏览器的远程调试
    • safari是苹果自制的
    • chrome, firefox, uc开发者都是使用adb
    • chrome pc端: chrome://inspect
    • uc: ip:9998(localhost:9998也行)
  • 使用weinre构建调试服务器
    • webkit内核专用
    • 需要手动增删js, 这个对于版本控制不力
    • 不能调试js, 只能调试css.
  • ios模拟器调试, 需要一些命令行, 目前没看到啥用处. http://taobaofed.org/blog/2015/11/13/web-debug-in-ios/

form操作:

  • http://www.jianshu.com/p/2cc3c3b4eff1

经验

  1. html5 实现很多了不起的属性和标签, 比如: placeholder=”qingshuru1输入学员ID、姓名、昵称进行查找” 这个就是input框的默认显示内容.

  2. font-size: 0; 这句话会引起奇怪的事情. 不要这么干.

  3. button标签需要封口标签.

  4. button的尺寸, 直接设置.

  5. 如何提交form,

    document.symgo_test.action = document.getElementById('test_url').value;
document.symgo_test.submit();

  6. 顺便说一句, safari的调试真心不错. 吐槽一句, google竟然用jQuery.

垂直居中

参考: https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/

https://www.zhihu.com/question/20543196

作者：徐尤熙
链接：https://www.zhihu.com/question/20543196/answer/89218605
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

7，使用css3的display:-webkit-box属性，再设置-webkit-box-pack:center/-webkit-box-align:center

.seven{
width:90px;
height:90px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
background:yellow;
color:black;
}
8，使用css3的新属性transform:translate(x,y)属性

.eight{
position:absolute;
width:80px;
height:80px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
background:green;
}
这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好

9、最高大上的一种，使用:before元素

.nine{
position:fixed;
display:block;
top:0;
right:0;
bottom:0;
left:0;
text-align:center;
background:rgba(0,0,0,.5);
}
.nine:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.nine .content{
display:inline-block;
vertical-align:middle;
width:60px;
height:60px;
line-height:60px;
color:red;
background:yellow;
}