CSS/HTML适合任何分辨率
我对css/html世界比较陌生。我正在尝试创建一个网站。但我注意到，即使当我试图在低分辨率屏幕上观看时，屏幕上的一切看起来都很好，但一切都是一团糟。有没有办法通过css使其正确显示 下面是我试图实现的一个图像，并使更低的分辨率成为可能： 这是我的css到目前为止的第一部分是重置。我是通过观看youtube教程得到的： html，body，div，span，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，abbr，address，cite，code，del，dfn，em，img，ins，kbd，q，samp，small，strong，sub，sup，var，b，i，dl，dt，dd，ol，ul，li，fieldset，form，label，ledge，table，table，caption，tbody，tfoot，thead，tr，th，td，article，side，canvas，details，figcapon，figcapon，fig，fig，fig，fig，footer，标题、组、菜单、导航、节、摘要、时间、标记、音频、视频{ 保证金：0； 填充：0； 边界：0； 大纲：0； 字体大小：100%； 垂直对齐：基线； 背景：透明； } 身体{ 线高：1； } 文章 在一边 细节， figcaption， 图形 页脚， 标题， hgroup， 菜单 导航， 部分{ 显示：块； } 导航ul{ 列表样式：无； } 块引用， q{ 报价：无； } blockquote：之前， blockquote：之后， 问:以前,， 问：之后{ 内容：； 内容：无； } a{ 保证金：0； 填充：0； 字体大小：100%； 垂直对齐：基线； 背景：透明； } /*根据需要改变颜色*/ ins{ 背景色：ff9； 颜色：000； 文字装饰：无； } /*根据需要改变颜色*/ 标记{ 背景色：ff9； 颜色：000； 字体：斜体； 字体大小：粗体； } 德尔{ 文字装饰：线条贯通； } 缩写[标题]， dfn[标题]{ 边框底部：1个点； 光标：帮助； } 桌子{ 边界塌陷：塌陷； 边界间距：0； } /*更改边框颜色以满足您的需要*/ 人力资源{ 显示：块； 高度：1px； 边界：0； 边框顶部：1px实心中交； 利润率：1米0； 填充：0； } 输入 挑选{ 垂直对齐：中间对齐； } /*!!!!!重置结束*/ /*我的CSS*/ 身体{ 宽度：100%； 身高：100%； } 标识1{ 左侧填充：25px； } 标识2{ 左侧填充：260px； } 永恒的{ 填充顶部：15px； 显示：块； 位置：绝对位置； 左：0； } 白喉炎{ 填充顶部：20px； 浮动：对； 位置：绝对位置； 底部：0%； 左：0； } 阿基里{ 垫面：5px； 显示：块； 位置：绝对位置； 右：0%； } 阿基里2{ 垫面：5px； 显示：块； 底部：0%； 右：0%； 位置：绝对位置； } 引述{ 文本对齐：居中； 填充：13%； 字体系列：Calibri； 字体大小：35px； } a{ 颜色：000； 文字装饰：无； } 身体{ 背景色：e1e8ea； 宽度：100%； 最小宽度：600px； 最大宽度：2000px } 标题{ 背景色：b5c4c9； 填充顶部：8px； 垫底：10px； 宽度：100%； 高度：159px； } 收割台img{ 浮动：左； } 导航{ 浮动：左； } 导航ul{ 利润上限：86px； 左边距：200px； } 李国荣{ 显示：内联块； 左边距：20px； } 海军ulli a{ 字体系列：Calibri； 字体大小：22px； } a、 例5：悬停， a、 例5：活动{ 文字装饰：下划线； } 评价你的教授 教育没有尽头。这并不是说你读了一本书，通过了考试，完成了教育。从你出生的那一刻到你死亡的那一刻，整个生命都是一个学习的过程。 -吉杜克里希那穆提CSS/HTML适合任何分辨率,html,css,resolution,Html,Css,Resolution,我对css/html世界比较陌生。我正在尝试创建一个网站。但我注意到，即使当我试图在低分辨率屏幕上观看时，屏幕上的一切看起来都很好，但一切都是一团糟。有没有办法通过css使其正确显示 下面是我试图实现的一个图像，并使更低的分辨率成为可能： 这是我的css到目前为止的第一部分是重置。我是通过观看youtube教程得到的： html，body，div，span，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，abbr，address，cite，co
嗨，使用诸如bootstrap之类的框架来构建您的应用程序总是一个好主意。这将帮助您的应用程序在所有类型的屏幕上都表现出色 你可以从这个网站上学习 如果你不使用任何像这样的框架，创建响应性网站将是一项乏味的任务。Bootstrap易于学习，并将为您节省大量时间 如果您决定不使用像bootstrap这样的框架，则必须使用媒体查询来根据屏幕大小调整元素的大小
如果您所指的较低分辨率意味着不同的屏幕大小，即手机、平板电脑、桌面，甚至是同一桌面上较小的窗口大小，那么您的解决方案就是CSS媒体查询。您似乎已经掌握了HTML和CSS的基本知识 使用CSS的下一步应该是学习媒体查询，根据屏幕大小/分辨率洗牌/移动页面内容 Bootstrap非常适合您处理此问题，但是如果您是HTML/CSS新手，您应该在使用它之前了解Bootstrap构建的代码。当然，这取决于你想要达到的技能水平 W3Schools非常适合初学者掌握关键概念。查看他们关于 媒体查询： 或 另一个伟大的资源是CSS技巧。查看他们的文章： 最后但并非最不重要的一点是，确保包含meta标记：
<meta name="viewport" content="width=device-width, initial-scale=1">