自适应
高地捣蛋鬼
目前无工作,欢迎各位老板砸单
展开
-
vw+sass/less 实现前端自适应布局
vw+sass/less 实现前端自适应布局 vw简介 vw是css的一个属性,和px,rem等类似,属于长度单位。 在浏览器中, 1 vw = viewport 的宽度 /100 根据这个特性,vw 可以帮助我们实现移动端自适应布局,其优点在于所见即所得,甚至优于rem,因为完全不用使用额外的计算。 如何使用 @vv: 7.5vw header.clear{ width: 100%; hei...原创 2019-03-26 16:02:32 · 4240 阅读 · 0 评论 -
移动端rem精讲
有相当长一段时间没做移动端了,最近有学生问我移动端的自适应布局,整理了一下资料,正好发上来当个博文。 目标 本文介绍rem,主要从原理层讲解,如何解决移动端诸如 **一像素bug**这样的自适应问题和高清问题 代码 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientat...原创 2019-04-03 10:49:48 · 241 阅读 · 0 评论 -
移动端布局 css 设置字体大小
@media (min-width:700px){html{font-size:27px;}} @media (min-width:640px) and (max-width:700px){html{font-size:25px;}} @media (min-width:630px) and (max-width:639px){html{font-size:23.66px;}} @media (m...原创 2019-04-19 14:06:44 · 370 阅读 · 0 评论 -
移动端字体显示大小和css设置大小的不一致解决方案
出现问题 这几天在做移动端页面,研究了一下手淘的 flexible.js 并在自己项目中试行了一下,然后发现了一个纠结无比的问题,即:css里设置了字体大小,但是显示却非常诡异,用 “诡异” 来形容是因为这个问题在定位的时候真的无迹可寻。 探查原因 后来接触到了一个概念,终于了解了问题的本来面目。这个概念叫做 “Font Boosting”(文字爆炸)。 当 viewport 的 initial...原创 2019-04-29 17:19:20 · 16628 阅读 · 0 评论