sunshinelover
sunshinelover
# 移动端1px线 ## viewport告诉你1px为什么变粗 html的代码中经常会有这么一句 >\ 这句话的意思是当前viewport的宽度为设备宽度，初始缩放值和最大缩放值都为1，并禁止了用户缩放viewport通俗的讲是浏览器上可用来显示页面的区域。而这句话设置的意义是先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。 还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。 在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。 有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。我们在css中使用的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。 所以这就能解释为什么我们在css中设置的1px看上去比较粗了，也就是比如说我们当前的设备设置了width=device-width, initial-scale=1.0并且当前的设备devicePixelRatio为2，那么在css设置的1px就相当于物理像素的2px啦。 `viewport的宽度可以通过 document.documentElement.clientWidth 来获取 ` ## 1px解决方法 ### 用小数的px iOS8已经支持带小数的px，但是安卓和低版本的iOS不适用，所以在要考虑兼容性的情况下这个解决方案不太可取。 > .border { border:...
@lv-web
# 两种抖动 为什么抖动还会有两种？ 其实是我碰到过两种抖动的场景，第一个场景是native的抖动，第二个场景是h5的抖动。 ## native的抖动 前端开发人员会在app中打开webview，这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动，整个viewport跟着动，所以可以在生成schema的时候将参数bounce_disable设置为1禁止native的弹性效果，然后加上h5的这个效果，-webkit-overflow-scrolling 属性可以帮我们实现这个效果，它控制元素在移动设备上是否使用滚动回弹效果。 ## h5的抖动 ### 方案一 ``` //我是吸顶头部 .header{ width:100%; height:50px; position:fixed; top:0px; } //我是中间要滑动的部分 .main{ width:100%; height:auto; position:absolute; padding-top:50px; padding-bottom:50px; box-sizing:border-box; overflow-y:scroll; -webkit-overflow-scrolling...
百闻不如一用。 Talk is cheap,show you the code. 使用前： ```css .lottery-sector li:nth-child(1) { background-color: #fff; transform: rotate(0deg) skew(54deg); } .lottery-sector li:nth-child(2) { background-color: rgb(254, 246, 225); transform: rotate(36deg) skew(54deg); } .lottery-sector...
# 单行文本和图片的水平中心线对齐方式 ## 场景 div里面有一个img标签，然后按照设计图给把图片的宽度和高度赋给了父元素，给img设置宽度和高度为100%，这样子元素img的宽度和高度就等于父元素的宽度和高度，奇怪的是出现了下图所示的问题：  可以看到图1和图2的详情高度不一样，更加奇怪的是，两个img标签的宽度和高度也是一样的。   ## 思路 因为不同字体会造成不同的渲染方式，比如下面这样，给这三个span标签的字体都设置了字体大小为100px，但是设置了不同的font-family，而表现出所看见的不一样的字体高度。所以首先给font-size设置为0，消除这个因素的影响。深究起来，其实每个内联元素会有两个高度： - line-height - 内容区域 每行内容可以由多个内联元素组成（内联标签或者是包含文本的匿名内联元素），每一行都叫做一个 line-box。line-height是实际的高度，这个高度用于计算 line-box 的高度，具体来说就是从子元素的最高点到最低点的高度。  vertical-align 属性也是计算 line-box 高度的重要因素之一，它的默认值是 baseline，也就是与其父元素基线相对齐；baseline 所处的高度跟字体也有关，浏览器认为每个 line-box 的起始位置都有一个宽度为 0...