我如何运行一个脚本的计算机屏幕和另一个移动(HTML CSS)

Question

我正在为一个编码训练营的应用程序建立一个单页网站。

我有2个HTML文件和2个CSS文件，因为页面的内容是不同的，取决于所使用的设备(手机或笔记本电脑)。

这四个文件是:"index.html"one_answers";styles.css"one_answers"mobile.html"one_answers"mobile.css">

我的目标是让它，如果屏幕宽度是>700px，然后它会运行:"index.html"one_answers"styles.css">

，如果设备尺寸为<它将运行:"mobile.html&quot;和"mobile.css&quot>

我添加了

@media only screen and (max-width 700px)

到mobile.css文件中，但这只是停止了所有的CSS工作。

如何让页面在正确的时间运行正确的脚本?

Answer 1

我认为有一个小误会。您不需要两个html文件。您要做的是修改index.html中的id和类，使其适合移动设备。这两个CSS文件是很好的第一步。

像这样插入CSS文件:

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="mobile.css">

确保在之后插入mobile.css你的style .css，所以你希望所有的样式都来自style .css，但在一些断点修改一些id或类与你的mobile.css.

所以用自然语言来表达:Hey styles.css。我希望你样式我所有的id和类，但如果移动。css到达一个断点，它想修改eg。#menu-bar有一个绿色的背景，我使用修改后的样式在mobile.css代替。

的例子:

styles.css

#menu-bar {
width: 100%;
background-color: red;
}

mobile.css

@media only screen and (max-width: 600px) {
#menu-bar {
background-color: green;
}
}

注意到我没有再次声明宽度吗?这是因为已经在styles.css中声明的所有内容将保持不变。只有你在mobile.css媒体查询中断点中改变的值才会改变。

一定要研究媒体查询，以便更好地理解它。选自本文