@import
Posted 童彪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了@import相关的知识，希望对你有一定的参考价值。
@import的具体语法
@import <url> <media_query_list>
<media_query_list>：[<media_query>[‘,‘ <media_query>]*]?
<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and<expression>]*
<expression>：‘(‘<media_feature>[:<value>]?‘)‘
@import的取值介绍
- <url>：
- 使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url
- <media_query_list>：
- 指定媒体类型和查询条件。
@import的使用说明
指定导入的外部样式表及目标媒体。
- 该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
- IE使用@import无法引入超过35条的样式表。
- 使用url(url)和直接使用url需要注意的地方：
示例代码：
@import url("global.css"); @import url(global.css); @import "global.css";以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可有可无；当直接使用url时，包住路径的引号必须保留。
- 指定媒体查询：
示例代码：
@import url(example.css) screen and (min-width:800px); @import url(example.css) screen and (width:800px),(color); @import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);
@import的浏览器兼容性
IE 9 +
- IE7及更早浏览器不支持@import指定媒体类型和媒体查询。
- IE8不支持@import指定媒体查询。
@import的完整演示案例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>CSS @import详解-CSS教程</title> <meta name="author" content="Joy Du(飘零雾雨), [email protected], www.doyoe.com" /> <style> @import url("style.css") screen, print; </style> </head> <body> </body> </html>
以上是关于@import的主要内容，如果未能解决你的问题，请参考以下文章
Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段
flutter解决 dart:html 只支持 flutter_web 其他平台编译报错 Avoid using web-only libraries outside Flutter web(代码片段