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中的常用选择器使用示例整理
Jun 13 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 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
php创建session的方法实例详解
2015/01/27 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
php框架知识点的整理和补充
2021/03/01 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python基础之函数用法实例详解
2014/09/10 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Python Requests库基本用法示例
2018/08/20 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
介绍Java的内部类
2012/10/27 面试题
总经理助理工作职责
2014/02/06 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
公司中秋节活动方案
2014/02/12 职场文书
在校学生证明格式
2015/06/24 职场文书
三八妇女节致辞
2015/07/31 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Python语言内置数据类型
2022/02/24 Python