移动端rem布局的适配mixin【转藏】
/*================================================================
以下为基于ip5 宽度320做的适配,标准html{font-size:10px},即1rem = 10px
=================================================================*/
@mixin queryWidth($min, $max) {
@if $min == -1 {
@media screen and (max-width: $max+px) {
html {
font-size: ( ($max+1) / 320 ) * 10px;
}
}
} @else if $max == -1 {
@media screen and (min-width: $min+px) {
html {
font-size: ( $min / 320 ) * 10px;
}
}
} @else {
@media screen and (min-width: $min+px) and (max-width: $max+px) {
html {
font-size: ( $min / 320 ) * 10px;
}
}
}
} @media only screen and (orientation: landscape) {
html {
font-size: 10px;
}
} @include queryWidth(-1, 319); // for iphone 4
@include queryWidth(320, 359); // for iphone 5
@include queryWidth(360, 374);
@include queryWidth(375, 383); // for iphone 6
@include queryWidth(384, 399);
@include queryWidth(400, 413);
@include queryWidth(414, -1); // for iphone 6 plus
以上为基于320的设计稿,若要基于375,只需将mixin中320改为375即可。若要100px=1rem,只需将mixin中10改成100即可。当然,这只能实现大部分常规机型的适配,有些特殊机型还是需要自己再加上对应的适配。
接下来罗列一下我用到过的适配,希望得到各位帮助逐步完善。
@media screen and (min-width: 320px) {} //for iphone 5
@media screen and (min-width: 375px) {} //for iphone 6
@media screen and (min-width: 414px) {} //for iphone 6 plus
@media screen and (min-aspect-ratio: 69/100) {} //for huawei荣耀6
@media screen and (min-aspect-ratio: 7/10) {} //for mx3
@media screen and (max-height: 480px) {} //for iphone 4
@media screen and (max-height: 420px) {} //for iphone 4 微信
@media only screen and (orientation: landscape) {} // for 横屏
原文地址:http://www.cnblogs.com/McChen/p/5017120.html
@media (min-width:320px) and (min-height:480px) {
.code{top: 42vh!important;}
} @media (min-width:320px) and (min-height:568px) {
.code{top: 32vh!important;}
}
移动端rem布局的适配mixin【转藏】的更多相关文章
- 分享一个移动端rem布局的适配mixin
/*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...
- 移动端rem布局屏幕适配插件(放js中便可使用)
/* doc:不用管:document对象 win:不用管:window对象 design:注意:设计稿的尺寸/物理像素*/ (function (doc, win,design) {// alert ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...
- 一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
- 移动端rem布局和百分比栅格化布局
移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...
- 关于移动端 rem 布局的一些总结
[资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...
随机推荐
- xcodebuild导出ipa方法
xcode 5.x版本导出ipa是不需要开发者账号,而xcode6以后导出ipa必须要求选择开发者team,无法绕开,但我们使用xcodebuild命令行可以无视这个限制 环境: mac osx 10 ...
- codeforce 651B Beautiful Paintings
题意:后一个比前一个大就加一,问最大次数. #include<cstdio> #include<cstring> #include<algorithm> #incl ...
- 【解决】Oracle数据库实现ID自增长
Oracle数据库要实现ID的自增长,需要创建一个序列和触发器来实现,略微有一点点麻烦,但是也是可以解决的. 直接上地址,首先,http://www.wlcrane.com/article.aspx? ...
- Scala学习笔记(三)类层级和特质
无参方法 功能:将方法的定义转换为属性字段的定义: 作用范围:方法中没有参数,并且方法仅能通过读取所包含的对象属性去访问可变状态,而不改变可变状态,就可使用无参方法: 例子: abstract cla ...
- (原)Struts 相关资源下载
官网:http://struts.apache.org 点击[Download],进入页面如下,可以看到下载的资源: 点击[struts-2.3.20-all.zip],就能获取Struts2项目所有 ...
- HDU-4415 Assassin’s Creed 贪心
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4415 用贪心来解,开始分为两个集合的方法错了,没有考虑之间的相互影响,正确的姿势应该是这样的,分两种情 ...
- POJ 2115 C Looooops(扩展欧几里得)
辗转相除法(欧几里得算法) 时间复杂度:在O(logmax(a, b))以内 int gcd(int a, int b) { if (b == 0) return a; return gcd(b, a ...
- 神奇的问题记录【SqlDataAdapter Fill DataSet】
今天发现程序中有一张报表查询速度很慢[全条件要二分钟左右],查找相关原因,准备进行优化处理.注:报表调用存储过程,存储过程返回两个table就有以下神奇的故事: 直接将SQL语句在SSMS中执行发现全 ...
- maven依赖规则
1.就近原则,传递依赖 A-B-C -> A-C 2.先声明原则 A-B-C D-E-C 依赖的规则阻止了jar包冲突
- ONIX 实例
<?xml version="1.0"?><!DOCTYPE ONIXMessage SYSTEM"http://www.editeur.org/oni ...