2015-05-06前端开发总结

一、关于弹性盒模型

box是先出来的，flex后出，现在主要用flex。
但是box有一个特性是flex没有的，文字可以垂直居中~

设了宽度+padding+border记住加：
box-sizing: border-box;
-webkit-box-sizing:border-box;

二、input css reset

-ms-content-zooming: none;
-ms-user-select: none;
-webkit-text-size-adjust: none;

阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust是webkit的私有css：

三、伪元素

before,after{
content: ".";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}

四、响应式重要知识点

媒体查询iphone6和6plus

@media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : landscape) {
//iPhone 6 landscape
}

@media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : portrait) {
//iPhone 6+ Portrait
}

rem 在css3中用法
html {
font-size: 62.5%;
/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem;
/*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem;
/*2.4 × 10px = 24px*/
}

五、判断横屏竖屏

1、CSS
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
2、JS判断横屏竖屏
//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态！');
}
}, false);
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。