2020-08-03 html的applicationxhtml+xml + css的rem弊端 + JS的arraybuffer与blob区别 + 软技能的2k 4k屏对前端的影响

2020-08-03 题目来源:http://www.h-camel.com/index.html

[html] 当页面中使用application/xhtml+xml会出现什么问题吗?

使用条件比较严格,必须有head body标签并且每个标签必须是闭合的。

兼容性问题,一些老的浏览器不支持,实际上,任何最新的浏览器都将支持application/xhtml+xml媒体类型。大多数浏览器也接受以application/xml发送的XHTML文档。

[css] rem的弊端是什么?

rem是长度单位,1 rem = 根元素html的font-size值。当页面所有元素都rem单位,那么只需要改变html的font-size值就能使所有元素按比例放大缩小,因此我们只需要写一小段js代码,根据屏幕宽度改变html的font-size值,就可以做到弹性布局。这种方法确实便捷,兼容性也很好,是目前非常主流的弹性布局方案。

弊端1:根元素font-size值强耦合,系统字体放大缩小时,会导致布局错乱

弊端2:html文件头部需要插入一段js代码

更好的选择是 自适应单位实现弹性布局 vm vh,但是也存在兼容性的问题,viewport即浏览器可视区域大小

vw:1% of viewport’s width

vh:1% of viewport’s height

vw单位和百分比%单位对比 那么100vw和我们平时用的width:100%有什么区别呢?

百分比%是根据父元素宽度或者高度进行计算,而vw vh固定按照viewport来计算,不会受父元素宽高度影响。 100vw包括了页面滚动条宽度(页面滚动条属于viewport范围内,100vw当然包括了页面滚动条宽度)。但把body或者html设置为width:100%时,是不包括页面滚动条的宽度的。也就是说100vw在有纵向滚动条的情况下,会比100%宽。 那么就会引发一个问题:pc端使用vw单位时,如果页面内容超出一屏长度,出现了纵向滚动条,同时有元素width:100vw, 则会导致出现条横向滚动条,因为元素(100vw + 滚动条宽度)超出了viewport宽度。(移动端滚动条不占位,所以不会有这个问题)不过pc端一般不需要弹性布局,还是尽量使用width:100%更保险。

为何rem布局比vw主流?兼容性

扫描二维码关注公众号,回复: 11726126 查看本文章

既然rem布局有弊端,与font-size强耦合会引发副作用,vw布局相较之下更纯粹代码逻辑也更清晰,为何移动端rem布局比vw主流?我们来看看vw和rem的兼容性。

相较之下,vw单位兼容性比rem稍差,ios8、安卓4.4及以上才完全支持。这也是为什么之前rem布局一直更流行的原因。

总结

目前ios8、安卓4.4以下的用户已经非常少了,caniuse上面显示,在中国这部分用户只有1.2%,比例已经非常低了,而这部分用户的手机估计只会打打电话不会使用互联网的(还是需根据各自产品的用户数据分析来决定是否使用vw)。如果你的页面只适用于微信、qq,那绝对能放心使用vw单位,还可以配合vh针对一些特殊比例屏幕做处理,彻底摆脱使用rem带来的副作用,删掉html头部计算font-size的那段js代码,让你的代码更纯粹。

原文:https://blog.csdn.net/huangm_fat/article/details/80090245

[js] ArrayBuffer和Blob有什么区别?

1.ArrayBuffer 对象代表存储二进制数据的一段内存,不能直接读写,只能通过视图(TypedArray视图和DataView视图)来读写,视图的作用是以指定格式解读二进制数据。

const buffer = new ArrayBuffer(32) // 一个指定大小的ArrayBuffer对象,内容被初始化为0; 实例化的buffer对象占用32个字节。

buffer.byteLength; // 32; byteLength 表示当前实例占用的内存字节长度,一旦创建就不可更改。

2.Blob对象,binary large object 二进制大型对象

Blob对象表示一个二进制文件的数据内容,用于读写文件,操作二进制文件,比如一个图片文件的内容就可以通过Blob对象读写;

与ArrayBuffer区别:Blob用于操作二进制文件; ArrayBuffer用于操作内存。

const leoBlob = new Blob(array [, options]);

原文较为详细: https://zhuanlan.zhihu.com/p/97711340

[软技能] 对于2K、4K屏的逐渐流行,对于前端来说将会有哪些改变呢

2K 4K屏幕的主要区别在分辨率、定义上。对于前端的影响也就是 适配问题

2k屏幕bai水平分辨率达约2000像素,最标准的2K屏幕分辨率为2048×1024。

4k屏幕的物理分辨率达到3840x2160(4Kx2K)及以上,成本较高,未能普及。

猜你喜欢

转载自blog.csdn.net/vampire10086/article/details/108343053
今日推荐