随笔分类 -  移动端适配与CSS技巧

摘要：在微信浏览器中，分享弹窗高度适配，原理就是使弹窗高度由内容撑开，主要应用于分享内容为一张很长的图片时，当图片过长，在小屏手机上显示不完全时，等比缩小一定尺寸使其能完全显示，大屏手机则按照原图尺寸显示。 效果图如下： 实现过程如下： 1. html结构 2. css样式 3. js逻辑 以iphone 阅读全文

摘要：注：无论是display:table方式还是display:inline-block方式，想要实现子元素水平或垂直或水平垂直都居中，一定不要忘记给父元素设置font-size:0消除默认间隙，不然会有误差。 1.图片或背景图与文字的对齐 给图片和文字的父容器设置font-size:0,然后单独给文字 阅读全文

摘要：1.自适应两栏布局(overfolw:hidden触发BFC) <style> * { margin: 0; padding: 0; } .aside { float: left; width: 100px; height: 200px; background: #f0f; } .main { ov 阅读全文

摘要：单行文本显示省略号 p { width:100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 1.容器宽度：width（px、%都可以） 2.强制文本在一行内显示：white-space：nowrap; 3. 阅读全文

摘要：现有页面，要求内容全部由图片撑开，但图片高度不够占据一整屏，如何在这种情况下，利用现有图片铺满全屏？ 可以利用calc计算属性及百分比实现。具体实现如下： 设计稿按照iphone6尺寸标准，页面分2部分，头部header与内容区container，头部占用32px，因此内容区需占用635px，全屏才 阅读全文

摘要：Trident：IE、360 IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器，代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。 Gecko：Firefox 代表作品Mo 阅读全文