移动端
nunumaymax
铁杵磨成针
展开
-
移动端使用雪碧图
移动端使用雪碧图前言解决方法前言为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位。在web端,通常先设置好图片的宽高,然后在psd视觉稿上测量出该图标的left 、top值,最后通过设置background-position 属性,就可以成功的显示出该图片。但是在移动端就不一样了,web端的单位统一为px,而移动端的单位为rem,并且各种手机的屏幕大小不一样,很难使用与web端相同的方法。所以普原创 2022-04-25 14:14:46 · 762 阅读 · 0 评论 -
移动端适配
移动端font-size的适配有的时候,我们在使用font-size和rem来给移动端做适配会遇到这样一个问题,年轻人把字体调小,老年人把字体调大,这样会让我们原本的适配失效,造成页面字体样式错位的问题,下面的方法会根据html的font-size与1px的倍率会页面重新进行适配。代码如下:(function (win, doc) { function createScaleElement() { let scaleDom = document.createElement('div')原创 2020-07-16 11:51:54 · 186 阅读 · 0 评论 -
text-size-adjust属性
当一个包含文本的元素使用了 100% 的屏幕宽度,该算法会增加文本大小,但是不会修改布局。为了将视窗上的布局映射到原始设备屏幕上,手机浏览器要么只渲染整个页面的一部分,要么将视窗缩放至原始屏幕大小。因为许多网站还没有适配屏幕较小的设备,移动设备的浏览器在渲染网页时可能会有不同。这个属性允许开发者去除或者修改浏览器的这种行为,比如,当网页已经适配了小屏幕之后,就不需要这么做了。注意:对于这个属性,不同浏览器有不同的行为和语法,所以需要在想要应用的浏览器加上属性前缀。原创 2022-12-15 12:30:11 · 2218 阅读 · 0 评论