几种响应式文字详解


Posted in Javascript onMay 19, 2017

讲真,其实我也不知道该如何为此篇开头,

因为响应式文字需不需要做其实我也没有深入探究过,

但在学习其他网站的过程中,我发现了一些比较新奇的做法,所以想试着梳理一下,

为何会出现这种有些奇怪,可能实则非常奇妙的解决方案。

如果理解有偏差的地方,还望大佬们不吝赐教。

简单来说,响应式是为了让网页在各种显示设备上都有不错的浏览体验,

无论是 @media 将元素换行,后台获取 userAgent 返回不同页面,利用 viewport 限定视图,还是利用根元素 html 属性来计算大小等,

他们都能实现各自编程特色的响应式布局,非要说谁是最优,恐怕还是得依需求而定。

接下来我们先大致罗列一下,这几种布局方法的如何施展的。

众所周知的 Bootstrap,它的栅栏布局即为媒体查询的代表,完全通过屏宽来判断元素是否换行和是否显示。

<style><br>.col-xs-2 {width: 50%}
@media (min-width: 768px) {
  .col-sm-3 {width: 33.333333%}
}
@media (min-width: 992px) {
  .col-md-4 {width: 25%}
}
@media (min-width: 1200px) {
  .col-lg-5 {width: 20%}
}
</style>
 <div class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></div>

非常方便操作和容易理解地将显示设备按宽度分成了四个区间,各区间内按栅栏占比给予宽度。

然而,随着移动互联网的迅猛突进,以及 WebApp 的使用,也由于手机的分辨率和尺寸被厂商们不断更新,

768px 以下的设计要求也相应拔高,人们开始对响应式的要求也有了些改变。

比如 iPhone4 上的文字大小还适合 iPhone6 吗,Retina 屏的 1px 问题,devicePixelRate 和屏幕缩放问题等等...

所以为了解决这些问题产生了非常丰富的解决方案,我们一个一个来。

首先,随着屏幕越大,字体大小也越来越大,好像是个不错的想法耶。

html { font-size: 10px;}
@media (min-width: 376px) and (max-width: 414px) {
  html{font-size: 11px;}
}
@media (min-width: 415px) and (max-width: 639px) {
  html{font-size: 13px;}
}
@media (min-width: 640px) and (max-width: 719px) {
  html{font-size: 14px;}
}
@media (min-width: 720px) and (max-width: 749px) {
  html{font-size: 15px;}
}
@media (min-width: 750px) and (max-width: 799px) {
  html{font-size: 16px;}
}
@media (min-width: 800px) and (max-width: 992px) {
  html{font-size: 20px;}
}
body {
  margin: 0;
  font-size: 1.6rem;
}

实践情况告诉我们,在 iPhone6 plus 上这种字大的体验确实不赖。

不过好像并不是字越大就越好看,比如在 iPad 上,字大绝对不是一个好的视觉体验。

所以又有了另一种搞法,根元素的字体大小由宽度和 devicePixelRate 来计算求得,也比上面的方法更注重了 dpr 的考虑。

<style>
body {font-size: .12rem}
</style>
<script>
!function() {
  function e() {
    r.innerText = "html{font-size:" + (a.style.fontSize = a.getBoundingClientRect().width / o * d + "px") + " !important;}"
  }
  var t = navigator.userAgent,
    n = (t.match(/(iPhone|iPad|iPod)/), t.match(/Android/i), window),
    i = document,
    a = i.documentElement,
    o = (n.devicePixelRatio, 375),
    d = 100,
    r = (i.head.querySelector('[name="viewport"]'), i.createElement("style"));
  r.innerText = "html{font-size:100px !important}", i.head.appendChild(r), e(), n.addEventListener("resize", e, !1);
  a.className += t.match(/ucbrowser/i) ? " app-uc " : ""
}();
</script>

这里并没有直接在设置 font-size 的时候就乘以 0.12 的原因可能是,这样会比较容易算宽度吧,比如 3.75rem 便是一个屏宽咯。

当然不用百分比而用 rem 来定宽,也是有些好处的。

比如两栏式百分比布局的间隙也只能百分比咯(calc 另当别论)造成左右和上下间隙不相等,

元素纵横比直接用数值就能完成,因为现在的 rem 就像百分比那样非常自动了,

后来发现,它还有 PC 端缩放浏览器比例保持页面不变的功效。

除此之外,还有淘宝的搞法,lib-flexible.js。

!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));

它和上面的方法在 rem 方面是类似的,10rem 便是一个屏宽,但在文字方面不太一样,

淘宝网触屏版 并不想让字体越来越大,而始终为 12px 或 24px,

而结果来看,字小图大加留白好像反而有些精细的感觉,也解决了上面方法 PC 端字超大的问题。

另外,如果使用此类方法,那么 @media 划分屏宽节点就得靠 rem 了哟,比如淘宝用的 10rem。

最后,再讲一个比较奇葩但又很有效的响应式方法。

<meta name="viewport" content="width=750,user-scalable=no" />
 
<style>
html, body {
  width: 750px;
  margin: 0 auto;
  overflow: hidden;
}
</style>

有没有感觉到一股我不管我不听的倔强气息,这种方法意味着,不管设备怎样,我只当设备是 750px 视图大小的设备。

375px 就是半个屏幕,这对做应用场景 H5 的小伙伴可谓是福音,做雪碧图用 px 定位什么的才是最爽的,

但它也有着它的坏处,也就是设备的宽高比是不定的,比如 iPhone4 和 iPhone5 一样宽但高度短一截,所以最好再加上一个上下居中的解决办法。

这几种方法都各有特色,有各自方便的角度,所以依照需求和喜好,多研究下吧,我也期望能有人来 和我讨论,么么哒

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 #Javascript
vue.js动态数据绑定学习笔记
May 19 #Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 #Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 #Javascript
angularjs封装$http为factory的方法
May 18 #Javascript
bootstrap表单示例代码分享
May 18 #Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 #Javascript
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
PHP中的替代语法介绍
2015/01/09 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
js 目录列举函数
2008/11/06 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
js实现扫雷源代码
2020/11/27 Javascript
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
python+mysql实现教务管理系统
2019/02/20 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
pandas实现导出数据的四种方式
2020/12/13 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
幼儿园大班开学教师寄语
2014/04/03 职场文书
董事长秘书工作职责
2014/06/10 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
学雷锋倡议书
2015/01/19 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
详解SQL报错盲注
2022/07/23 SQL Server