移动端(阿里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这样的: 然后获取浏览器的分辨率,也就是视口 ...
随机推荐
- 转：Super Awesome Fuzzing, Part One
转:https://labsblog.f-secure.com/2017/06/22/super-awesome-fuzzing-part-one/ An informative guide on u ...
- AndroidStudio运行项目出现DELETE_FAILED_INTERNAL_ERROR和INSTALL_CANCELED_BY_USER
以上的错误为:无法将AS中的代码放到手机上 解决:File->Settings->Build,Execuion,Deployment->Instant Run然后把Enable In ...
- Pandas分组运算（groupby）修炼
Pandas分组运算(groupby)修炼 Pandas的groupby()功能很强大,用好了可以方便的解决很多问题,在数据处理以及日常工作中经常能施展拳脚. 今天,我们一起来领略下groupby() ...
- ServletContext （上下文对象）
一.什么是ServletContext ServletContext代表是一个web应用的上下文对象(web应用对象) 里面封装的都是web应用信息 一个ServletContext对应一个应用 二. ...
- [BZOJ3224]普通平衡树(旋转treap,STL-vector)
3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 20328 Solved: 8979[Submit][St ...
- [ARC 066] Tutorial
Link: ARC 066 传送门 C: 如果存在可行方案则答案为$2^{n/2}$ #include <bits/stdc++.h> using namespace std; #defi ...
- BZOJ 2467 [中山市选2010]生成树（组合数学）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2467 [题目大意] 有一种图形叫做五角形圈.一个五角形圈的中心有1个由n个顶点和n条边 ...
- 【Matrix-tree定理】【并查集】【kruscal算法】bzoj1016 [JSOI2008]最小生成树计数
题意:求一个图的最小生成树个数. 矩阵树定理:一张无向图的生成树个数 = (度数矩阵 - 邻接矩阵)的任意一个n-1主子式的值. 度数矩阵除了对角线上D[i][i]为i的度数(不计自环)外,其他位置是 ...
- 【高斯消元】CDOJ1783 曜酱的线性代数课堂（一）
高斯消元求逆矩阵板子. #include<cstdio> #include<cmath> #include<algorithm> #include<cstri ...
- php 自动补位
1 sprintf("%06d", 2); 2 str_pad();