移动端(阿里rem)布局
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
<script>
//通过window.screen.width获取屏幕的宽度
var offWidth = window.screen.width / 30; //这里用宽度/30表示1rem取得的px
document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size
</script>
<style>
/*偷个懒就直接全局初始化了*/ * {
padding: 0;
margin: 0;
}
/* 布局需求,上下都间隔*/ div {
margin: 0.833333333rem 0;
}
/* 去处a标签的下划线*/ a {
text-decoration: none;
} .one {
width: 30rem;
/*100/720*30*/
height: 4.166666667rem;
/*图片宽750,高100*/
background: url("./img/1.jpg") no-repeat;
background-size: contain;
} .two {
width: 30rem;
/*400/720*30*/
height: 16.6666667rem;
/*图片宽750,高400*/
background: url("./img/2.jpg") no-repeat;
background-size: contain;
} .three {
width: 30rem;
height: 5.875rem;
/*图片宽750,高141*/
background: url("./img/3.jpg") no-repeat;
background-size: contain;
} .four {
width: 28.33333333rem;
height: 13.16666667rem;
/*图片宽750,高316*/
background: url("./img/4.jpg") no-repeat;
background-size: contain;
margin-left: 0.833333333rem;
position: relative;
} span {
position: absolute;
display: block;
width: 8.33333333rem;
height: 2rem;
line-height: 2rem;
text-align: center;
background: #fff;
right: 0.833333333rem;
bottom: 0.833333333rem;
font-size: 0.95833333rem;
color: red;
cursor: pointer;
} .five {
width: 28.33333333rem;
height: 13.16666667rem;
/*图片宽750,高316*/
background: url("./img/top4.jpg") no-repeat;
background-size: contain;
margin-left: 0.833333333rem;
}
</style> </head> <body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four">
<a href=""><span>25元起</span></a>
</div>
<div class="five"></div>
</body> </html>
移动端(阿里rem)布局的更多相关文章
- 移动端自适应rem布局
补充一个基本知识,不许笑,1rem等于HTML中设置的字体大小(px) 首先,HTML 的 head 部分中加入如下代码: <meta name="viewport" con ...
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...
- Html5移动端页面自适应布局详解(阿里rem布局)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ...
- 移动端自适应rem 布局篇
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 第132天：移动web端-rem布局（进阶）
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
- 一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
- 移动端rem布局和百分比栅格化布局
移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...
随机推荐
- 《深入理解Android2》读书笔记（一）
2017-5-12 从今天开始估计有一段空闲时间,开始阅读<深入理解Android2>,并写读书笔记. 第一章搭建环境直接略过. 第二章是Binder,暂时略过 7大类服务包括:1.And ...
- Codeforces 补题记录
首先总结一下前段时间遇到过的一些有意思的题. Round #474 (Div. 1 + Div. 2, combined) Problem G 其实关键就是n这个数在排列中的位置. 这样对于一个排 ...
- Flask实战第47天：首页导航条首先和代码抽离
新建一个前台页面的父模板front_base.html 导航条是总boostrap v3中文站拷贝过来的,然后根据自己的需求做一些修改 <!DOCTYPE html> <html l ...
- java 反射 获取Class对象的三种方式
String str="hello world"; //方式一 :通过对象的getClass()方法 Class<?> clazz1 =str.getClass(); ...
- hdu 1011(Starship Troopers，树形dp)
Starship Troopers Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 【动态规划】Codeforces Round #406 (Div. 2) C.Berzerk
有向图博弈问题. 能转移到一个必败态的就是必胜态. 能转移到的全是必胜态的就是必败态. 转移的时候可以用队列维护. 可以看这个 http://www.cnblogs.com/quintessence/ ...
- bzoj 3540: [Usaco2014 Open]Fair Photography
3540: [Usaco2014 Open]Fair Photography Description FJ's N cows (2 <= N <= 100,000) are standin ...
- 找出最小元素的下标 Exercise07_10
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:找出最小元素的下标 * */ public class Exercise0 ...
- 必知必会JVM垃圾回收——对象搜索算法与回收算法
垃圾回收(GC)是JVM的一大杀器,它使程序员可以更高效地专注于程序的开发设计,而不用过多地考虑对象的创建销毁等操作.但是这并不是说程序员不需要了解GC.GC只是Java编程中一项自动化工具,任何一个 ...
- 手动清除或刷新Linux的Swap分区
物理内存接近饱和时,系统会自动将不常用的内存文件转储到Swap中,但Swap使用率达30%的时候对系统性能可能有一定影响.但当物理内存重新释放时,储存在Swap分区的其它应用不会重新回到物理内存中,所 ...