CSS3中媒体查询结合rem布局适配手机屏幕


Posted in HTML / CSS onJune 10, 2019

css3语法: (750px设计图的1rem = 100px)

@media only screen and (min-width: 320px) and (max-width: 479px){
    html {
        font-size: 42.67px !important;
    }
}
@media only screen and (min-width: 480px) and (max-width: 639px){
    html {
        font-size: 64px !important;
    }
}
@media only screen and (min-width: 640px) and (max-width: 749px){
    html {
        font-size: 85.34px !important;
    }
}
@media only screen and (min-width: 750px) and (max-width: 959px){
    html {
        font-size: 100px !important;
    }
}
@media only screen and (min-width: 960px) and (max-width: 1241px){
    html {
        font-size: 128px !important;
    }
}
@media only screen and (min-width: 1242px){
    html {
        font-size: 165.6px !important;
    }
}

js控制

(zepto / jQuery)(750px设计图的1rem = 100px)
function setFont() {
    let window_width = window.innerWidth;
    let font_size = parseFloat(window_width / 3.75);
    $('html').css('font-size', font_size);
}

$(window).on('resize', function () {
    setFont();
});

总结

以上所述是小编给大家介绍的CSS3中媒体查询结合rem布局适配手机屏幕,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 #HTML / CSS
CSS3 分类菜单效果
May 27 #HTML / CSS
css3实现六边形边框的实例代码
May 24 #HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 #HTML / CSS
css3实现可拖动的魔方3d效果
May 07 #HTML / CSS
CSS3 实现童年的纸飞机
May 05 #HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 #HTML / CSS
You might like
PHP5 面向对象程序设计
2008/02/13 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
js强制把网址设为默认首页
2015/09/29 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
python中import reload __import__的区别详解
2017/10/16 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
教师实习自我鉴定
2013/12/11 职场文书
高二生物教学反思
2014/01/27 职场文书
公司面试感谢信
2014/02/01 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
特教教师先进事迹
2014/05/21 职场文书
观看焦裕禄观后感
2015/06/09 职场文书