html – 如何根据屏幕的宽度更改页面的CSS样式？

概述我正在建立一个网站,我需要网站响应,所以我需要根据屏幕的宽度更改CSS.我有3个样式表,主要版本,普通版本和移动版本,它们都存在于 HTML中： <link rel="stylesheet" href="stylesheet/main.css" /> <link rel="stylesheet" href="stylesheet/style.css" media="(min-width: 我正在建立一个网站,我需要网站响应,所以我需要根据屏幕的宽度更改CSS.我有3个样式表,主要版本,普通版本和移动版本,它们都存在于 HTML中：

<link rel="stylesheet" href="stylesheet/main.CSS" />    <link rel="stylesheet" href="stylesheet/style.CSS" media="(min-wIDth: 851px)" type="text/CSS" />    <link rel="stylesheet" href="stylesheet/mobile.CSS" media="(max-wIDth: 850px)" type="text/CSS" />

当我使用它时,我总是通过改变页面的宽度来确保它的工作原理,我发现它有效.但是,当我使用Chrome的仿真模式(检查元素 – >启用仿真),并且屏幕低于某个样式表的最大宽度时,网页会保留其“正常”模式,而我的响应式设计没有任何效果.我应该在CSS中使用它(作为一个大文件)：

@media only screen and (max-wIDth : 851px) {}

正常(在大屏幕上)：

当我改变宽度(大屏幕)时：

仿真模式(ipad)：

解决方法 使用媒体查询.参见例如这个页面 https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries 总结

以上是内存溢出为你收集整理的html – 如何根据屏幕的宽度更改页面的CSS样式？全部内容，希望文章能够帮你解决html – 如何根据屏幕的宽度更改页面的CSS样式？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。