移动端(阿里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这样的: 然后获取浏览器的分辨率,也就是视口 ...
随机推荐
- web资料收集
Web安全资料:https://github.com/CHYbeta/Web-Security-Learning http://blog.pentestbegins.com/2017/07/21/ha ...
- HDU 5820 Lights （2016多校7L，主席树）
题意 给定n个平面上的点,坐标范围为[1, 50000].如果对于任意两个点,都可以通过直走(中途经过其他点)走到. 那么输出YES,否则输出NO. 首先排序,去重. 我们要找的点对是只能斜对角走到 ...
- mtk预装apk 方案公司内置预装apk
mtk预装apk 方案公司内置预装apk 韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha == MTK 预知第三方的APK 流程_yua ...
- JZYZOJ1442 [noip2013]华容道 bfs 最短路 剪枝
http://172.20.6.3/Problem_Show.asp?id=1442 想到最短路的简直神了,如果我写我大概只能写一个30分的bfs. 从数据范围可以看出思路是bfs剪枝,但这里的剪枝是 ...
- poj 1348 Period(KMP)
Period Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- BZOJ 2288 【POJ Challenge】生日礼物（贪心+优先队列）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2288 [题目大意] 给出一列数,求最多取m段连续的数字,使得总和最大 [题解] 首先我 ...
- 【推导】计蒜客17116 2017 ACM-ICPC 亚洲区（西安赛区）网络赛 C. Sum
题意:S(x)被定义为x的十进制表示下的数位之和.给你x,让你找一个正整数k,使得S(kx)能被233整除.k不超过2千位. 由于x不超过1000000,不论x是多少,10000000重复233次一定 ...
- Problem F: 逆序排列
#include<stdio.h> void sort(int *p,int n) { int i,t; ;i<n/;i++) { t=*(p+i); *(p+i)=*(p+n-i- ...
- [转]SpringMVC拦截器详解[附带源码分析]
目录 前言 重要接口及类介绍 源码分析 拦截器的配置 编写自定义的拦截器 总结 前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不熟悉,那么请参考它的入门blog:ht ...
- dump备份mysql库
Auth: Jin Date: 20140403 Content: #!/bin/bash - ### auth: Jin ### ### Desc: 根据配置文件里的ip,端口(dblist文件格式 ...