js和media query的响应式

最新推荐文章于 2023-08-16 16:24:16 发布
最新推荐文章于 2023-08-16 16:24:16 发布
阅读量171 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hkduan/article/details/113773201
版权 
$(window).resize(function(){
						if($(window).width() <= 703){
							$(".loyalty-banner-inner").css("height","185px");
						}else if($(window).width() <= 879){
							$(".loyalty-banner-inner").css("height","100%");
						}else if($(window).width() > 880){
							$(".loyalty-banner-inner").css("height","97px");
						}
					})
					$('.loyalty-banner-loyalty_visible').slideDown(1000, function() { 
						$(this).css('display', 'flex');
					});

// 窗体变化监听
window.οnresize=function(){
	if(document.body.clientWidth <= 768){
	}else if(document.body.clientWidth <= 900){
	}else if(document.body.clientWidth <= 1200){
	}
	...
	if(document.body.clientHeight <= 768){
	}
}


<meta name="viewport" content="width=device-width,initial-scale=1.0">
媒体查询
1.引用样式
<link rel="stylesheet" media="(max-width:480px)" href="mobile.css">

2.样式表中直接使用
@media(max-width:480px){...}

一个三栏布局的，在不同的尺寸下，变为两栏，再变为一栏
在这里插入图片描述

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>css3-media-queries-demo</title>
   <style>
   body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
       padding: 0;
       margin: 0;
   }
   .content{
       zoom:1;
   }
   .content:after{
       content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
   .leftBox, .rightBox{
       float: left;
       width: 20%;
       height: 500px;
       margin: 5px;
       background: #ffccf7;
       display: inline;
       -webkit-transition: width 1s ease;
       -moz-transition: width 1s ease;
       -o-transition: width 1s ease;
       -ms-transition: width 2s ease;
       transition: width 1s ease;
   }
   .middleBox{
       float: left;
       width: 50%;
       height: 800px;
       margin: 5px;
       background: #b1fffc;
       display: inline;
       -webkit-transition: width 1s ease;
       -moz-transition: width 1s ease;
       -o-transition: width 1s ease;
       -ms-transition: width 1s ease;
       transition: width 1s ease;
   }
   .rightBox{
       background: #fffab1;
   }
   @media only screen and (min-width: 1024px){
       .content{
               width: 1000px;
               margin: auto
           }
   }
   @media only screen and (min-width: 400px) and (max-width: 1024px){
       .rightBox{
           width: 0;
       }
       .leftBox{ width: 30%}
       .middleBox{ width: 65%}
   }
   @media only screen and (max-width: 400px){
       .leftBox, .rightBox, .middleBox{
           width: 98%;
           height: 200px;
       }
   }
   </style>
   </head>

   <body>
   <div class="content">
     <div class="leftBox"></div>
     <div class="middleBox"></div>
     <div class="rightBox"></div>
   </div>
   </body>
   </html>
前端段
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js-media-query:使用 javascript 检测 css 定义的媒体查询
07-14
JavaScript 媒体查询 在媒体查询断点转换时触发 JavaScript 事件，并将您的媒体查询保留在 CSS 中作为唯一的地方。 用法 bower install jquery js-media-query 使用 jquery 的链接语法为marker-name断点添加onMediaMatch事件侦听器。 提供一个匹配的事件处理程序和一个可选的非匹配事件处理程序，如下所示： [removed][removed] [removed][removed] [removed] ...
用JavaScript操作Media Queries
weixin_33786077的博客
01-08 101
在响应式（或自适应）设计中要用到Media Queries这个CSS属性，但在某些时候我们需要对Media Queries进行动态操作，这时候可以使用Javascript。 如以下Media Queries的代码： @media all and (max-width: 700px) { body { background: #FF0; } } ...
在javascript中使用媒体查询media query
weixin_30498921的博客
01-02 277
由于需要，我们可能会在js中用到一些media query，从而针对不同的分辨率做一些操作。 1 //全兼容的 事件绑定 and 阻止默认事件 2 var EventUtil = { 3 //Notice: type is not include 'on', for example: click mouseover mouseout and so on 4 ...
media query语法和响应式布局
怪咖
02-03 273
media query语法和响应式布局 media query 语法 media query 的语法稍微有点复杂，语法格式如下： @media not|only 设备类型[and 设备特性] * 在上面语法格式中， [ and 设备特性 ] 部分可以出现 O~N 次，通过使用 多个[and 设备特性］可以对多个设备特性进行匹配。 media query 语法格式中的设备类型如表所示。 实际上...
介绍如何使用 Media Query 完成响应式设计 -- 您想知道的有关媒体查询和响应式设计的所有信息
CHQIUU的专栏
08-16 1万+
媒体查询是一种 CSS 语言功能，它允许作者根据正在查看应用程序的设备或窗口的特征有条件地应用 CSS 规则。最常见的是，这些可能是根据视口宽度，允许 CSS 作者创建_响应_正在查看它们的窗口或设备大小的组件和布局。但这也可能扩展到用户是喜欢浅色模式还是深色模式，甚至是用户的辅助功能首选项，以及更多属性。随着如此多的不同设备类型和屏幕尺寸的增加，对于 Web 应用程序来说，为用户提供更量身定制的视觉呈现变得越来越重要，并针对他们首选交互方法的屏幕尺寸进行优化。
JS中使用media实现响应式布局
10-19
在JavaScript中，虽然media query主要用于CSS中，但可以通过JavaScript动态添加或修改样式表，以实现响应式布局效果。 媒体查询（Media Queries）是CSS3新增的特性之一，它允许开发者根据媒体类型和条件来应用CSS...
让IE支持CSS3 Media Query实现响应式Web设计
09-22
在这个话题中，我们将深入探讨如何使用HTML5和CSS3的Media Queries功能来实现响应式Web设计。响应式设计是目前Web开发中非常重要的一个方面，它让网站能够适应不同分辨率和设备的屏幕，从而提供更好的用户体验。 ...
让IE支持CSS3 Media Query实现响应式Web设计，html5.js让IE（包括IE6）支持HTML5元素方法
10-29
让IE（包括IE6）支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement_x声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也...
简单介绍CSS3中Media Query的使用
09-25
Media Query的引入极大地增强了网站的响应式设计能力，使得页面能够自适应不同屏幕尺寸的设备，无论是桌面电脑、平板还是智能手机。 **一、Media Query的基本语法** Media Query的语法结构主要包括媒体类型（media...
js使用媒体查询
qq_26780317的博客
03-20 4001
前言：有时候，我们需要根据媒体查询，判断用户窗口的改变，从而控制一些代码的变化。样式的改变，通过CSS3的媒体查询；行为和功能的改变使用JS的媒体查询。 一、定义和用法 matchMedia()返回一个新的MediaQueryList对象，表示指定的媒体查询字符串解析后的结果。 matchMedia()方法的值可以是任何一个CSS@media规则的特性，如min...
jquery.media.js
12-08
在web开发过程中，用这个jQuery的js文件可以简单的实现PDF文件的在线浏览！
Mediabox-开源
04-25
Mediabox在网页上的模式对话框中显示Flash，视频和html内容。 它利用MooTools库并使用Videobox，Slimbox，Slimbox EX和Moviebox的一部分。
JavaScript media queries
司马懿的西山居
02-14 1207
译自 MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries Note: This is an experimental technology Because this technology’s specification has not stabilized, che
respond.js media query
齐枫的博客
07-11 356
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) 使用： 原文链接：http://caibaojian.com/respondjs.html 1.在css中正常用 min/max-width media queries · //code from http:/
media query 的用法
Hi, Sun
04-01 297
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose
jquery.media.js在线预览pdf使用总结
时空之间
03-24 8338
jquery.media.js在线预览pdf使用总结 最近有个移动端项目的协议比较多，需要展示给客户预览，而为了节约时间，想直接将 pdf 协议展示，不想再转换成html，于是经过网上搜索资料和技术调研，再经过< object >、< embed >、< iframe >、pdf.js、jquery.media.js的技术尝试之后，发现在pc端表现不错，但一旦用...
Media query 详解
热门推荐
MR_LP的博客
05-25 1万+
最近更新文章不及时,在此说声抱歉,关于 media query 在网络上实际已经有很多成型的文章,但是在编者查看之后,发现并没有特别基础的入门教程,所以今天上午特意去对知识进行了整理,于是就有了下面的这篇文章,希望在阅读过这篇文章之后,能够帮助到你,感谢. ������5月24是作者的生日呦,希望大家多多留言点赞!������ 0.前言很多时候,前期使用 HTML 和 CSS 设计的样式非
mediaquery 什么jar包
最新发布
09-06
MediaQuery 是一个用于响应式设计的 JavaScript 库，它可以根据设备的屏幕尺寸和特性来自动调整网页的布局和样式。它可以帮助开发人员针对不同的屏幕大小和设备类型创建适配性更好的网页。 然而，MediaQuery 不是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端段

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值