首页 > 其他分享 >网页根据屏幕宽度请求不同的CSS文件

网页根据屏幕宽度请求不同的CSS文件

时间:2024-05-10 13:45:44浏览次数:22  
标签:网页 请求 960px 宽度 屏幕 CSS

网页根据屏幕宽度请求不同的CSS文件

前言:重在记录,可能出错。

一、代码

<!DOCTYPE html>

<html lang="ch">
	<head>
		<title>网页根据屏幕宽度请求不同的CSS文件</title>
		<link id="desktop-style" media="only screen and (min-width: 960px)" type="text/css" rel="stylesheet" href="./css/desktop-common.css?version=0.1.4">
		<link id="mobile-style" media="only screen and (max-width: 960px)" type="text/css" rel="stylesheet" href="./css/mobile-common.css?version=0.1.4">
	</head>
	<body>
	</body>
</html>

二、解释

media="only screen and (min-width: 960px)"当屏幕宽度大于960px时请求的CSS文件
media="only screen and (max-width: 960px)"当屏幕宽度小于960px时请求的CSS文件

标签:网页,请求,960px,宽度,屏幕,CSS
From: https://www.cnblogs.com/wsgxg/p/18184117

相关文章

  • Selenium4自动化测试3--元素定位By.NAME,By.LINK_TEXT 和通过链接部分文本定位,By.PARTI
    4-通过名称定位,By.NAMEname属性为表单中客户端提交数据的标识,一个网页中name值可能不是唯一的。所以要根据实际情况进行判断 importtimefromseleniumimportwebdriverfromselenium.webdriver.common.byimportBy#指定浏览器的位置,解决浏览器驱动和浏览器版本不匹配......
  • css border-radius 如何设置不占div宽度,向外突出
    在CSS中,border-radius用于创建元素的圆角边框,但边框圆角本身是包含在元素的总宽度和高度内的,并不会额外占用外部空间或使元素尺寸变大。如果你想让圆角“向外突出”,即不占用div本身的宽度和高度,可以通过一些技巧来模拟这种效果。一种常见的方法是使用伪元素(::before和::afte......
  • CSS第二趴
    一吐槽学完基础教程,看网页被教育了,继续学吧继续学习元素的属性 二中级教程1.display属性,规定如何是否/如何显示元素,元素默认有自己的display属性,但可以改变如何显示 display:nonedisplay:blockdisplay:inline 1.1块级元素(blockelement)从新行开始,占据一行,并......
  • CSS JS 自适应菜单
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>ResponsiveMenu</t......
  • css正在加载中的效果
    <divclass="loading"><pclass="loader"></p><p>正在加载中</p></div>.loading{position:absolute;width:100%;text-align:center;top:45%;color:#3498db;}.loader{......
  • Streamlit:快速构建可视化网页(数据科学必备)
    很多算法工程师在完成数据分析、模型训练或者项目总结的时候,往往只能通过ppt汇报,添加数据图表、截图模型实验结果等。如果想提供一个前端演示demo,通常可以搭建flask服务,但是flask需要学习很多前端知识,如css、html等,这又是一个深之又深的坑。那有没有什么工具能够跳过这些模块,直接......
  • 网页布局------悬浮在input框上时旁别按钮边框颜色也会发生变化
    input边框和按钮放在同一个div下,使用hover可以设置悬浮在input边框时的颜色变化,而需要设置按钮边框的颜色变化则需要使用"+"来添加 页面结构<divclass="nav-search"><inputtype="search"placeholder="小米11"class="nav-search-inpu......
  • python+selenium+excel自动登录,自动填写网页
    经常有些网页要登录,然后频繁填写一些重复的内容,本文暂只考虑不需要验证码的情况,可以通过selenium模拟用户行为在页面操作,用excel拖出相似内容,用xlrd读取并填写到网页中。导入相关包fromseleniumimportwebdriverimportosimportxlrdimportxlwtimportjsonimportreq......
  • 网页布局-------三角制作
    使用border设置三角形,通过transparent隐藏多余的内容<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><......
  • toapi:抓取任意网页内容并提供 HTTP API获取数据
    Github地址:https://github.com/elliotgao2/toapiPythonToapi是一个基于XPath和CSS选择器的WebAPI框架,它能够快速将网页内容转换为结构化的API。Toapi提供了简单易用的接口,使得开发者可以轻松地从网页中提取数据,并以API的形式呈现出来。同时,Toapi支持自定义规则和过......