H5移动端rem布局还原750px设计稿方案。

引入对应的脚本:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!--引入淘宝lib-flexible布局--><script src="./index.min.js"></script><!--引入淘宝lib-flexible布局--><!--设计稿给出750px的设计图，然后对应除去75就为样式的rem， 比如设计稿的元素宽度是75px, 那么样式直接写1rem就可以了--><link href="./h5.css" rel="stylesheet" /><title>H5淘宝移动端布局方案</title>
</head>
<body><ul><header>header</header><div class="box"><div class="left">left</div><div class="right">right</div></div></ul>
</body>
</script></script>
</html>

css代码：

* {margin: 0;padding: 0;
}
/********设计稿给出750px的设计图，然后对应除去75就为样式的rem， 比如设计稿的元素宽度是75px, 那么样式直接写1rem就可以了***********/
header {width: 10rem;height: 1.5rem;background: red;font-size: 0.36rem;
}.box {margin: 0 auto;width: 6.9466rem;height: 6.173rem;background-color: #515b66;background: blue;font-size: 36px;
}.box .left {float: left;width: 3.2rem;height: 1rem;background: green;
}.box .right {float: left;width: 4.3rem;height: 1rem;background: yellow;
}

设计稿给出750px的设计图，然后对应除去75就为样式的rem，比如设计稿的元素宽度是75px, 那么样式直接写1rem就可以了

H5移动端rem布局还原750px设计稿方案。相关推荐

第130天：移动端-rem布局
一.关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
移动端rem布局基本介绍及原理
rem布局 em和rem的认识在布局中,除了px之外,还有两个常见的单位,em和rem em: 相对于当前元素的字体大小→ 1em = 当前标签的font-size rem: 相对于根元素(html ...
移动端rem布局实例
逆战班学生记录: rem理解: em是一个相对单位,1em等于当前元素或父元素的font-size值 rem是指相对于根元素的字体大小的单位.简单的说它就是1个html标签的font-size大小. ...
750px设计稿处理方式
一般设计图的宽度为750px,现在我们的目标就是将layoutviewport设置为750px: layoutviewport受到两个属性的影响,width属性我们之间设置为750,initial-s ...
前端适配不同型号手机分辨率，100%还原UI设计稿的方案实践
现在手机屏大小不一,而且屏幕硬件性能也各不相同,一般的UI设计都是基于特定机型画设计搞件的,常见的是基于iPhone6的分辨率设计2倍图,以iPhone6为例,屏幕物理像素宽度是750,网页宽度为37 ...
H5移动端rem转成rpx
现在移动端的宽度一般都是以750为标准的去设计的但是呢,H5不支持rpx,Vue也不支持这个单位,但是我们可以用别的单位去替代它,那个单位就是rem. Rem单位 Rem 单位提供最伟大的力量并不仅 ...
移动端rem布局（阿里）
该方案使用相当简单,把下面这段已压缩过的原生JS(源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置) < ...
h5移动端自适应布局
场景:为适应各种大小的屏幕自适应布局我知道的两种方式 1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px <s ...

H5移动端rem布局还原750px设计稿方案。

H5移动端rem布局还原750px设计稿方案。相关推荐

最新文章

热门文章