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 相关文章推荐
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 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
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python常见异常分类与处理方法
2017/06/04 Python
Python实现通讯录功能
2018/02/22 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python decimal模块使用方法详解
2020/06/08 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
国际贸易专业个人求职信格式
2014/02/02 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
销售人员求职信
2014/07/22 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书