布局

使用flex弹性布局来为微信小程序写自适应页面

    我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖 display 属性 + position属性 + float属性,但是浮动布局有一些致命的小问题,比如垂直居中比较费劲,比如著名的float坍塌问题,另外有些极端情况下,还得使用模型+clear:both来手动清除浮动,比较麻烦。     于是,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局......

rem在响应式布局中的应用

rem在响应式布局中的应用最近做了一些响应式的页面,遇到了一些问题,想了些解决方法,在这里总结一下。目前响应式的主流实现方式是百分比布局,加上媒体查询@media screen。关于媒体查询还有媒体查询的一些兼容性问题,网上介绍的很多其实响应式布局中主要困扰我们的问题还是元素的等比缩放。目前的元素的等比缩放主要有以下两种解决方案。实现等比缩放的一些方案1. 利用img元素的等比缩放特点这种情况最为常见,只需要百分比设置img元素的宽度,img元素的高度就会随着宽度等比缩放。这也是我们在响应式界面......

移动布局方案(转载)

layout viewport和visual viewport移动端浏览器和PC最大的不同在于大小(废话= =),那么怎样让网页友好的展示在移动端呢。很显然的,如果不做任何处理,很多页面的展示必然会乱掉。Apple也发现了这个问题,并定义了一个viewport meta标签,用来创建一个虚拟的**layout viewport**(布局视图),这个视图的分辨率接近pc,Apple将其定义为**980px**,其他厂商可能不同,感兴趣的可以自己写页面测试下。这就很好的解决了早期的页面在手机上显示的......