移动端自适应封装的通用媒体查询代码
2017-12-05 16:15
197 查看
1.可放在less中@input引用 //设计稿宽度 @psdWidth:750; //基准值 @baseSize:100; //定义变量 @r:100rem; //需要适配的设备宽度,可自行添加 @deviceWidthList:320px,360px,375px,384px,400px,414px,424px,480px,540px,640px,720px,750px; //length(@deviceWidthList)获取数组长度 //extract(@deviceWidthList,1)获取数组序号为几的值 //body{ // height: extract(@deviceWidthList,1); //} //@index指的是数组的序号,when满足这个条件 当序号要小于数组的长度 .adapterFuc(@index)when (@index<= length(@deviceWidthList)){ @media(min-width:extract(@deviceWidthList,@index)) { html{ font-size:extract(@deviceWidthList,@index)/@psdWidth*@baseSize; } } .adapterFuc(@index+1); } //调用 .adapterFuc(1);
相关文章推荐
- 移动端自适应之媒体查询,em,rem
- web移动端开发(3)-媒体查询
- 常见的媒体查询自适应分辨率区间
- 利用OpenSSL中EVP封装调用对称加密算法的通用代码
- 你用过媒体查询,或针对移动端的布局/CSS 吗?
- Java 面向对象的三大特征:继承、封装【隐藏】、多态<为了适应需求的多种变化,使代码变得更加通用>
- Mysql通用查询方法(采用泛型确定输入类型,BeanUtils进行对象封装)
- PC端浏览器自适应(火狐、谷歌、IE11),媒体查询@media
- 你用过媒体查询,或针对移动端的布局/CSS 吗?
- 媒体查询,移动端常见布局以及其他
- MYSQL ORACLE 查询表名及字段--封装代码自动生成时用
- 简化的通用分页代码封装
- 移动端游览器自适应代码
- 你用过媒体查询,或针对移动端的布局/CSS 吗?
- javascript ajax请求封装和微信分享通用代码
- 移动端媒体查询的一些尺寸参考
- 屏幕适配之c3媒体查询代码块(20/1为1rem)
- 媒体查询及代码初始化
- JPA动态查询代码封装
- CSS媒体查询和flex实现自适应多栏布局