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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
动态加载iframe
2006/06/16 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
详解webpack-dev-server使用方法
2018/09/14 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
python实现交并比IOU教程
2020/04/16 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
人事行政主管岗位职责
2013/12/22 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
经销商订货会主持词
2014/03/27 职场文书
高一学生期末评语
2014/04/25 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
Golang的继承模拟实例
2021/06/30 Golang
Golang ort 中的sortInts 方法
2022/04/24 Golang
win10搭建配置ftp服务器的方法
2022/08/05 Servers