首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动页面的自适应rem

移动页面rem 写移动页面最麻烦的是什么,不同分辨率的适配!...,em作为其他属性单位时,代表自身字体大小——MDN em做弹性布局的缺点还在于牵一发而动全身,一旦某个节点的字体大小发生变化,那么其后代元素都得重新计算 rem作用于非根元素时,相对于根元素字体大小...响应式布局强调不同屏幕要有不同的显示,比如媒体查询 一些偏向app类的,图标类的,图片类的,比如淘宝,活动页面,比较适合使用rem,因为调大字体时并不能调大图标的大小 四、Rem布局方案 rem+js...padding: 0; width: 10rem; /* 防止页面过宽 */ outline: 1px dashed green; } /* js...1px solid #d6e9c6; padding: 3px 5px; background: #dff0d8; color: #3c763d; } /* js

2.3K20
您找到你想要的搜索结果了吗?
是的
没有找到

移动自适应的常见手段

移动常见的适配方案有以下几种,一般都是互相搭配使用。包括: 视口元信息配置 响应式布局 相对单位 媒体查询 响应式图片 安全区域适配 知识点深入 1....为了让移动也能正常显示未适配移动设备的页面,从而引入布局视口和视觉视口的概念。 布局视口(layout viewport) 布局视口的宽度默认为 980px,通常比物理屏幕宽。...使用 viewport 元标签配置视口 开发者可以通过 对移动的布局视口进行设置。...由于早期 vw、vh 兼容性不佳,一个使用广泛的移动适配方案 flexible 是借助 rem 来模拟 vw 特性实现移动适配。在设计与开发时,通常会约定某一种尺寸为开发基准。...vw/vh 由于目前 vw、vh 相关单位获得了更多浏览器的支持,可以直接使用 vw、vh 单位进行移动开发。

1.8K00

移动对齐 + 图片宽度自适应

自适应四宫格 有这样一张设计稿,左右两边白色间距为4px,中间间距为10px,每一行的两张图是等宽的(即平分去掉间距后的宽度) 有一种方法是和设计师商量,把所有的具体尺寸改为百分比尺寸。。...这个布局不太好写的主要原因是,在宽度上,百分比(50%)与实际尺寸(4px 10px)混杂,所以做到宽度自适应的话会有困难。...偶数单元的负margin(-10px)和父元素右padding(14px)会中和成4px的右边距(实际上是因为元素负margin会使其右边的元素向左移动并被其覆盖) 运营的同学在实际操作中,做的图可能不会很标准...absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; } } 自适应六宫格

1.4K40

移动H5通过flexible.js+rem自适应适配方案

rem rem less vscode插件cssrem 总结:两种方案都可以,一般推荐第二种方案,更简单操作 二、简洁高效的rem配方案flexible.js 原理 手机淘宝团队出的简洁高效移动适配库...页面元素值(px) / (屏幕宽度/划分的份数)) ②屏幕宽度/划分的份数就是html的 font-size的大小 ③或者:页面元素的rem值=页面元素值(px) / html font-size字体大小...三、使用步骤 技术选型案例 方案:我们采取单独制作移动页面方案· 技术:布局采取rem适配布局 ( flexible.js + rem ) 设计图:本设计图采用750px设计尺寸 1.下载flexible.js...页面元素的px值/ 75(750px/75)*/ width: 10rem; margin: 0 auto; } 这样就完成了,然后就可以根据750的设计稿进行在移动开发了...cssroot为64 5.辅助工具 VSCode px转rem插件 cssrem; image.png 作用:编写代码时自动根据写的px单位计算出等于多少rem 注意: cssrem默认的html字体大小

1.2K50

【如果你要学JS XIV】—— 移动常用事件-移动touch触摸事件

导绪移动浏览器兼容性较好,不需要考虑JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动也有自己独特的地方。如触屏事件touch (也称触摸事件) , Android和IOS都有。...这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。...touchstart,touchmove,touchend 可以实现拖动元素2.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0] 里面的pageX和pageY3.拖动的原理:手指移动计算出手指移动的距离...,然后用盒子原来的位置+手指移动的距离4.手指移动的距离 = 手指滑动中的位置 - 手指刚开始触摸的位置<!...= e.targetTouches[0].pageY - startY; // 移动盒子,盒子原来的位置+手指移动的距离 this.style.left =

49400

HTML 文件在PC&移动完美自适应布局的技巧

优化前: 优化后: 当然,pc和网页版也要完美适配,outlook、foxmail和网页版效果如下: 一、实现思路 参考比较常见的响应式布局,在PC使用左图布局,移动右图。...1 邮箱渲染html的兼容性问题很多,在桌面和移动渲染电子邮件大约有上百万种不同的组合方式,所以我们要找出一个最小子集来书写html和样式。...3 本次迭代的目标是提升手机阅读体验,以机原生邮箱客户和QQ邮箱作为基础。然后用各种hack手段来适配其他设备和客户。...4 移动web的常规优化对邮件html同样适用,比如使用更小的字体、图片格式选型和压缩、高精度图片适配retina屏、用css绘制小图标代替图片等等。...4 QQ邮箱网页版(https://mail.qq.com) PC版没啥好说的,完全支持各种特性,只是移动版有点小麻烦: @media (min-width: 900px) {     .item{}

3.6K60
领券