/*================================================================
以下为基于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 横屏

个人博客:

https://chenjiahao.xyz

分享一个移动端rem布局的适配mixin的更多相关文章

  1. 移动端rem布局的适配mixin【转藏】

    /*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...

  2. 移动端rem布局屏幕适配插件(放js中便可使用)

    /* doc:不用管:document对象 win:不用管:window对象 design:注意:设计稿的尺寸/物理像素*/ (function (doc, win,design) {// alert ...

  3. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  4. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

  5. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  6. 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

    先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

  7. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...

  8. 移动端rem布局和百分比栅格化布局

    移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...

  9. 第132天:移动web端-rem布局(进阶)

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

随机推荐

  1. hdu 1176免费馅饼(记忆化搜索)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1176 题意不解释了 简单的记忆化搜索可以拿来练练手,注意要从pos = 5 开始搜索 #include ...

  2. CF 987C Three displays DP或暴力 第十一题

    Three displays time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  3. React-Native组件样式合集

    最近在阅读RN的文档,但有一点深感遗憾的是——官方对绝大多数RN组件没有用Gif图或者静态图的方式呈现给大家. 所以我通过百度查询,一个一个的查到了这些RN组件的UI表现图,下面呈现给大家   阅前必 ...

  4. 关于重写对象equals方法的问题

    1.==和equals的区别 a.基本数据类型使用  == 进行值的比较 b.引用类型使用 == 进行比较时,直接比较的是对象的存储地址,即两个引用是否指向了同一个对象. c.equals方法是基类O ...

  5. 更换SVN项目资源库目录出现的问题

    今天在做SVN资源库管理时出现了如下问题: 因为当时把资源库地址写错了,所以想换个资源库,所以先断开资源库 然后我重新导入新的资源库位置: 于是就出现了这种问题: 其实这个问题困扰我好久了之前一直放过 ...

  6. 内部类实例化Serializable

    昨天在做一个java项目的时候,发现下面代码中红色字体那行总是报NotSerializableException,查错误,MyRectangle这个类也明明实现了Serializable接口. 花了大 ...

  7. Net基础篇_学习笔记_第十二天_面向对象继承(父类和子类)

    继承 我们可能会在一些类中,写一些重复的成员,我们可以将这些重复的成员,单独的封装到一个类中,作为这些类的父类.Student.Teacher.Driver 子类  派生类Person         ...

  8. 使用HTML制作网页

    网页基本信息[编码格式] gb2312:简体中文,一般用于包含中文和英文的页面 ISO-885901:纯英文,一般用于只包含英文的页面 big5:繁体中文,一般用户带有繁体字的页面 utf-8:国际通 ...

  9. spring data jpa介绍

    首先了解JPA是什么? JPA(JavaPersistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关联映射工具来管理Java应用中的关系数据.他的出现主 ...

  10. C#将数据导入到excel文件

    最近在做C#对excel的操作程序,简单的与datagridview的交互如下 using System;using System.Collections.Generic;using System.C ...