gpt4 book ai didi

html - 媒体查询 - 单独和独立的样式表?

转载 作者:太空宇宙 更新时间:2023-11-04 00:17:47 25 4
gpt4 key购买 nike

在索引 html 文档的头部使用媒体查询,是否可以告诉访问者浏览器使用独立于原始样式表的单独样式表?

目前,除了原始样式表之外,我使用的是 mobile_specific 样式表,它的样式变得越来越棘手。

<link type="text/css" media="screen" href="styles.css" rel="stylesheet">

<link href="styles_mobile.css" media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet">

因此除了 styles.css 之外还使用了 syles_mobile.css。 如何告诉浏览器只使用“styles_mobile.css”而不是同时使用两个样式表?

最佳答案

将媒体查询添加到与您的移动查询相反的常规样式表:

<link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)">

<link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">

PS:我建议您使用标准的属性顺序。并且 type 属性不是必需的,因为它有一个默认值 text/css with link and style elements 和一个默认值 text/javascript 在脚本元素上。

关于html - 媒体查询 - 单独和独立的样式表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10539734/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com