![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web移动端笔记
文章平均质量分 53
Yomuki
这个作者很懒,什么都没留下…
展开
-
【工作笔记】不明确最终像素比的情况下的自适应大屏解决方案
我也不知道为什么会不明确.....随手一下,方便下次抄 需求:大屏需铺满屏幕,不能出现滚动条,白边,布局错乱等问题。 设计稿为1920*1080 方案1:利用transform的scale直接缩放。 整一个缩放组件 <template> <div class="screen-adapter" id="screenAdapter" :style="style"> <slot /> </div> </template> &原创 2022-05-10 14:59:42 · 379 阅读 · 0 评论 -
移动web——rem
一、rem rem(root em)是一个相对单位,类似于em,em据使用它的元素的大小决定(很多人错误以为是根据父类元素,实际上是使用它的元素继承了父类的属性才会产生的错觉)。 rem的基准是相对于html元素的字体大小。 例如:根元素(html)设置fonr-size=12px;非根元素设置width: 2rem;则换成px表示就是24px。 html { font-size: 24px; } .div2 {原创 2020-12-01 14:14:05 · 105 阅读 · 0 评论 -
移动端Web——Flex
display: flex; display: inline-flex; display: -webkit-flex; 设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局 通过给父盒子添加flex属性,来控制子盒子的位置和排列 一、常见父项属性 flex-direction 决定主轴的方向(即项目的排列方向)。 row(默认值):主轴为水平.原创 2020-11-30 20:49:22 · 99 阅读 · 0 评论 -
移动Web笔记——视口/二倍图/多倍图/背景缩放
一、视口 视口 viewport 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口,视觉视口,理想视口。 1.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期PC端页面再手机上显示的问题 IOS,Android基本将这个视口分辨率设置为980px,所以PC上的网页大多都能再手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。 1.2 视觉视口 visual viewport 用户正在看到网站的区域 我们可以通过缩放去操原创 2020-11-29 15:16:59 · 568 阅读 · 0 评论