我正在尝试使用下面显示的链接中的代码进行响应式布局设计。
1) 事实上，如果 CSS 代码包含在 html 代码中，则可以按预期完美显示
2) 但是，如果我将确切的 CSS 代码移动为不同的文件并从 html 代码链接到它，则在视觉上，框布局效果不佳。结果在不同的浏览器中似乎相似。
有人知道这是什么原因吗？我期待得到更多类似的视觉结果
对于网站 html 代码来说，将 css 包含在 html 代码中(如(1))或作为不同的文件(如(2))一般也会很好
https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_blog
这是我用来链接到 css 文件的代码
<!DOCTYPE html>
<html lang="en-US">
<body>
<head>
<title>My page</title>
<link rel="stylesheet" href="styles.css">
</head>
这是 CSS 工作表的顶部代码
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
结果截图如下
编辑
在 Lunex 回答后审查了 css 表代码(顶部)
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
最佳答案
创建一个 CSS 文件。假设您将其命名为“style.css”。
在此文件中，您将所有内容放入 <style> 标签中。
在您添加的 head 标签内的 html 文件中:
<link rel="stylesheet" href="style.css">
考虑到您已正确完成所有操作，这应该可行。
为您的编辑而编辑:
您的 css 文件中不需要 html 标签。
html文件的内容应该是:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the body content here -->
</body>
</html>
您的 css 文件的内容应该是:
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
// ...
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
关于css - 如果将此 CSS 代码作为不同的文件包含，为什么在视觉上会得到不同的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56580646/