Html 如何在页面宽度减小时将文本向下包装
我在一个CSS网格结构中工作，左边是一个图像，右边是一块文本。当我减小页面宽度时，图像和文本都会调整大小以适应页面的宽度。但是，当我经过475px时，布局会中断，图像和文本会延伸到页面之外 为什么会发生这种情况？我如何修复它？我尝试过媒体查询，但没有结果 在我下面的技能部分，当页面宽度减小时，我可以将文本向下流动，因此我对上面的部分感到困惑，因为它没有流动 注：原始图像大小为3024px × 4032px * { 填充：0； 保证金：0； } ：根{ -主色：2E64C6； -主悬停颜色：rgb27、62、126； } 身体{ 最大宽度：1087px； 保证金：0自动； 填充：0 40px； } img{ 最大宽度：100%； 高度：自动； } a{ 文字装饰：无； 颜色：黑色； } a:悬停{ 颜色：主色； } /*类型*/ .标志{ 字体系列：“蒙特塞拉特”，无衬线； 字体大小：30px； 字号：700 } .头衔{ 字体系列：“Hind”，无衬线； 字体大小：40px； 线高：50px； } .副处长{ 字体系列：“Hind”，无衬线； 字体大小：20px； } .身体{ 字体系列：“蒙特塞拉特”，无衬线； 字体大小：16px； 线高：30px； 颜色：rgb114、114、114； } .页脚{ 字体系列：“蒙特塞拉特”，无衬线； 字体大小：16px； } .阅读更多{ 字体系列：“蒙特塞拉特”，无衬线； 字体大小：14px； } .info容器{ 边缘顶部：18px； } .联系方式{ 字体系列：“蒙特塞拉特”，无衬线； 字体大小：16px； 线高：31px； } .段落{ 利润上限：21px； } .正文：N-child2{ 边缘顶部：30px； } /*间距*/ .介绍{ 利润上限：64px； } .定义{ 颜色：主色； } .技能， .项目， .联系方式{ 利润率：187像素自动； } .bold{ 字体大小：粗体； } /*导航*/ .导航{ 显示器：flex； 对齐项目：居中； 证明内容：之间的空间； 边缘顶部：60像素； } r-nav{ 显示器：flex； } .北卡罗来纳州：第N儿童{ 左边距：30px； } /*介绍*/ .介绍{ 显示：网格； 网格模板列：repeatauto-fit，minmax400px，1fr； 网格自动行：自动； 栅极间距：40px； } .介绍电子邮件{ 文本最后对齐：右对齐； } /*技巧*/ .技能{ 最大宽度：773px； 文本对齐：居中； } .技能清单{ 边缘顶端：40px； 显示器：flex； 对正内容：空间均匀； 柔性流动：包裹； } 李{ 列表样式类型：无； } /*计划*/ .projects>.title{ 文本对齐：居中； } .项目容器{ 显示：网格； 网格模板列：repeatauto-fit，minmax350px，1fr； 网格自动行：自动； 边缘顶端：40px； 证明内容：中心； 栅隙：50px； } .img{ 背景色：RGB255183183； 高度：285px； 宽度：415px； } .item>.title{ 边缘顶部：30px； } .item>.body{ 最大宽度：80%； } .item>。阅读更多信息{ 边缘顶部：30px； 显示器：flex； 对齐项目：居中； } .材质图标{ 字号：1em } /*接触*/ .联系方式{ 文本对齐：居中； } /*页脚*/ .页脚{ 显示器：flex； 对齐项目：居中； 证明内容：之间的空间； 边缘底部：60px； } .footer text>a:悬停{ 颜色：var主悬停颜色； } @仅介质屏幕，最大宽度：1041px{ .头衔{ 字体大小：3.5vw； 线高：4vw； } .介绍{ 背景色：45267525； } } @仅介质屏幕，最大宽度：919px{ .头衔{ 字体大小：5.4vw； 线高：5.4vw； } .介绍{ 背景色：ff000025； } } @仅介质屏幕和最大宽度：540px{ .头衔{ 字体大小：7vw； 线高：8vw； } .介绍{ 背景色：e5ff0025； } } @仅介质屏幕，最大宽度：430px{ .技能清单{ 填充：0 30px } .项目{ 背景色：rgba145、255、0、0.164； } .item>.body{ 最大宽度：95%； } } 泰勒·莫拉莱斯——前端开发人员 tmo。Html 如何在页面宽度减小时将文本向下包装,html,css,responsive-design,css-grid,responsive-images,Html,Css,Responsive Design,Css Grid,Responsive Images,我在一个CSS网格结构中工作，左边是一个图像，右边是一块文本。当我减小页面宽度时，图像和文本都会调整大小以适应页面的宽度。但是，当我经过475px时，布局会中断，图像和文本会延伸到页面之外 为什么会发生这种情况？我如何修复它？我尝试过媒体查询，但没有结果 在我下面的技能部分，当页面宽度减小时，我可以将文本向下流动，因此我对上面的部分感到困惑，因为它没有流动 注：原始图像大小为3024px × 4032px * { 填充：0； 保证金：0； } ：根{ -主色：2E64C6； -主悬停颜色：rg
您好，world当您达到475px时，您需要在媒体查询中将minmax从400px更改为100% .介绍{ 显示：网格； 网格模板列：repeatauto-fit，minmax100%，1fr； 网格自动行：自动； 栅极间距：40px； }
您可能还需要调整配置文件图像的大小，因为它相当大。我想大概550像素宽 您建议调整图像大小，是纯粹为了速度/页面加载，还是有其他原因？是的。此外，图像所在的区域从未超过550px。您目前拥有的尺寸将填满4k屏幕：