[英].js active only for resolution >767px
I have tricky header and when I scroll down... header-bar, menu and logo are smaller. 我的标题有些棘手,当我向下滚动时...标题栏,菜单和徽标较小。 But I don't want that on the mobile device. 但是我不想在移动设备上使用。 How to activate that .js only for resolution >767px? 如何仅激活分辨率大于767px的.js?
$(window).scroll( function() {
var value = $(this).scrollTop();
if ( value > 350 )
$(".top-nav li").css("padding", "20px 15px 0px"),
$(".logo img").css("margin", "7px 0 0 0"),
$(".logo img").css("height", "50px");
else
$(".top-nav li").css("padding", "30px 15px 10px"),
$(".logo img").css("margin", "13px 0 0 0"),
$(".logo img").css("height", "57px");
});
What you search for is Responsive Webdesign and should not be implemented all-alone in JS. 您搜索的是响应式Webdesign,因此不应仅在JS中单独实现。
Implement it in css instead like this (just for example): 像这样在CSS中实现它(例如):
@media(min-device-width: 767px){
.top-nav li {
padding: 20px 15px 0px;
}
}
Regards 问候
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.