如何设计在桌面和移动设备上呈现不同的网页？ [复制]

Question

问题：我有一个智能手机优化的网页，但该网页在台式机/PC 上看起来不太好。当我尝试使桌面版本看起来不错时，它破坏了移动外观。我希望能够根据相关设备设计使用网页中不同部分代码的页面。

是否可以在单个网页中编写特定于设备（台式机/PC 或移动设备/智能手机）的代码？

Answer 1

阅读此文档确信它会有所帮助

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

Answer 2

这个作品的名字是“响应式设计” 主要思想是使用 css צedia 查询来确定屏幕尺寸并为每个屏幕尺寸应用特定样式

试试这个链接开始： https://www.freecodecamp.org/news/media-query-css-example-max-and-min-screen-width-for-mobile-responsive-design/

什么是响应式设计？ 响应式设计是确保您的内容在所有屏幕尺寸上看起来都不错的做法。网站中的所有内容，包括布局、字体和图像都应该自动适应用户的设备。

什么是媒体查询？ 在 CSS 中，媒体查询用于根据浏览器的特征（包括宽度、高度或屏幕分辨率）应用一组样式。

这是 CSS 中媒体查询的基本语法：

@media media-type (media-feature){
/*Styles go here*/
}