移动端rem布局的适配mixin【转藏】
2024-09-16 17:03:51
/*================================================================
以下为基于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;}
}
最新文章
- centos7.0 安装字体库
- Remove Duplicates from Sorted Array II [LeetCode]
- Leetcode Combination Sum II
- 转载部长一篇大作：常用排序算法之JavaScript实现
- jQuery上传插件,文件上传测试用例
- Get Many Persimmon Trees_枚举&&二维树状数组
- Linux常用命令记录
- supervisor tornado 多进程多端口配置
- 矩阵分解（rank decomposition）文章代码汇总
- WPF中常用控件的属性
- BootStrap基礎知識
- NOI2017游记
- iOS使用自签名证书实现HTTPS请求
- BZOJ_4269_再见Xor_线性基
- 探索PowerShell 【十三】WMI对象
- php操作Memcache的一个类库
- mpvue——引入echarts打包vendor过大
- echarts研究
- 在IE浏览器中url传参长度问题
- Python标准数据类型的二次加工