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新特性应用之过渡与动画
Jan 10 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
php模板引擎技术简单实现
2016/03/15 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python删除某个目录文件夹的方法
2020/05/26 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
教育局长自荐信范文
2013/12/22 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
拖欠货款起诉状
2015/05/20 职场文书
信息技术国培研修日志
2015/11/13 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL