技术最前端,专注 Web 技术学习与总结。JavaScript, JS, ES6, TypeScript, Vue, PHP, CSS3, Html5, Node, Git, Markdown 等技术文章。
-webkit-text-size-adjust
是为了保持网页字体大小的一个属性,因为有些网页的字体缩小以后,难以识别,并且也严重影响到用户体验,如果在全局定义了 html { -webkit-text-size-adjust: none; }
会导致另一个现象:浏览器一般提供给小群体用户一个功能,就是放大与缩小网页视图。禁用了这一属性,在 chrome 下放大网页,会导致其它元素均放大,而文字却依然为原定义的 12px。
当你需要搞定响应式布局时,一堆堆的媒体查询、大量的属性、属性值往往可以把你搞颠,SASS(或者诸如此类的预处理器)被认为是处理响应式断点的最佳利器。
说到响应式断点处理,很多种方式涌上心头,经常有人问哪种方式最优,正如前端开发领域的大多数问题一样,这个问题同样没有标准答案,我们需要具体问题具体分析。更确切的说,难度不在于提出一个系统,而是提出一个既足够灵活(适用大部分场合)又不非常复杂的系统。
在今天的文章里,我将给大家介绍若干种响应式布局断点的解决方案,每一种都经过实践验证,一些方案可能优于其他方案,我会把决定的权利交给大家。
经典的三列布局,也叫做圣杯布局 Holy Grail of Layouts,是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:
三列布局,中间宽度自适应,两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高