css常见问题

CSS：

1、垂直居中布局

　　（1）已知宽高

　　　　

　　（2）未知宽高

　　　　https://segmentfault.com/q/1010000004073623

2、文字退格

　　text-indent: 4em;

3、文字阴影

　　text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

4、图片置顶

　　父元素：position：absolute，top0 left0 bottom0 right0

　　子元素：width100% height100%

5、隐藏div时候不会变形重绘

　　用visibility ：visible/hidden取代display：none

6、textarea

　　rows="30px" 定义高度

　　overflow：hidden滚动条隐藏

7、font中

　　（1）目前已知的绝对长度单位有in，cm，mm，pt，pc，px。即如果一个长度单位所指定的长度是根据另一个长度

相对长度单位
    em           元素的字体高度
    ex           字体x的高度
    px           像素Pixels
    %            百分比Percentage
绝对长度单位
    in           英寸Inches（1英寸=2.54厘米）
    cm           厘米Centimeters
    mm           毫米millimetre
    pt           点Points（1点=1/72英寸）
    pc           皮卡Picas（1皮卡=12点）

　　（2）绝对大小值在w3c只有7个值，xx-small,x-small,small,medium,large,x-large,xx-large这7个绝对值，具体看7个绝对大小值，

　　　　　而单位px，em，百分比都不在里面，所以这些都不是绝对大小值。

　　（3）对于百分比和em：　

　　　　都会根据父元素来计算自身比例

　　　　假如div包含一个span标签，span标签指定为font-size:1.125em;或font-size:120%;，那么这个span标签文字大小计算如下：

　　16*1.125em=18px

　　16*120%=19.2px //显示应该是19px

　　（4）对于rem：

　　　　是从根元素计算，不管你的div标签包含N个子元素，你的子元素的字体大小都是直接由根元素计算得出

　　（5）假如你头部的meta设置像这样

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"/>

　　那么你在设置文字字体的时候应该是为设计稿的2x，而不是直接按照设计稿输出。

8、retina屏下图片高清问题

　　图片放大到两倍，然后容器50%

　　如图片实际为：400px × 600px;

　　容器

img{
    width:200px;
    height:300px;
}

　　背景图片

img{
　　width: 200px;
　　height: 300px;
　　background-image: url(image@2x.jpg);
　　background-size: 200px 300px; // 或者: background-size: contain;
}

9、解决1px问题

当dpr（window.devicePixelRatio）为3时，线是原本的3倍，粗线缺乏美感

解决

测试发现绝大部分android机器用下面的vieport设置也完全可以实现1px的真实效果。但是新webkit下已经移除了对target-densitydpi=device-dpi的支持。所以主流android还是用标准的设置上述initscale=scale，因此最后的方案是主流的设备设置viewport为

<meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5">

设置以上viewport还是无法改变默认980viewport的非主流设备（如vivo,云os等），设置如下：

<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>

因此，最后的实现代码如下：

metaEl.setAttribute('content', 'target-densitydpi=device-dpi,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale);
//不通过加入具体设备的白名单，通过此特征检测 docEl.clientWidth == 980
//initial-scale=1不能省，因为上面设置为其他的scale了，需要重置回来
    if(docEl.clientWidth == 980) {
        metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1');
    }

其余方案还有用图片、用background-image、用box-shadow、用transform: scale(0.5)

详情看http://www.atatech.org/articles/26335#0

　　

JS：

1、获取移动端设备的像素点

　　window.devicePixelRatio

代码规范：

1、js用驼峰、css用横杠

2、css横杠不要超过3个

3、不要用中文命名

4、不要用.xxx p .xxx div，改回用命名

5、所有弹窗用一个section包着

6、float的时候外面用一个div包着

7、数据交互用到的元素用id

8、bg名字和css3重复。改

9、background的样式分开一行行写，不要放一起

10、page页面留下<div id="page-index"></div>.页面内容在components/boot/xxl里全局变量var $page, $root;对外两个方法page.show和page.hide