CSS3中媒体查询结合rem布局适配手机屏幕
发布时间:2019-06-10 16:22:55 作者:佚名
我要评论
这篇文章主要介绍了css3中媒体查询结合rem布局适配手机屏幕,需要的朋友可以参考下
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布局适配手机屏幕,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
相关文章

详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
这篇文章主要介绍了详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的2020-11-16css3媒体查询中device-width和width的区别详解
这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小2020-03-27- 这篇文章主要介绍了css3 响应式媒体查询的示例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-25
- 这篇文章主要介绍了CSS3 Media Queries中媒体属性的使用,文章中还以一个响应式设计的例子作为补充讲解,需要的朋友可以参考下2016-02-29
- 这篇文章主要介绍了CSS3媒体查询基本学习教程,包括基本的语法和逻辑操作符,以及媒体查询可检测的特性与利用viewport禁止用户缩放等部分的内容,需要的朋友可以参考下2016-02-29
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应2014-04-03- 媒体类型:all 所有设备、screen 电脑显示器等等;媒体特性共13种,可以说是一个类似CSS属性的集合,感兴趣的朋友可以了解下本文,希望对大家有所帮助2013-09-12
- 这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例,需要的朋友可以参考下2023-11-27



最新评论