宜搭自定义页面创建一个岗位标准化流程说明页面，我使用了一个大容器包裹文本和图片，pc端显示正常，但是移动端显示很大，无法缩放，除了使用手册上写的pc端写一个页面，移动再另外写一个的方案，有没有偷懒点的，一个页面，设置不同的显示方式啊
写回答
在阿里云宜搭中，如果你希望一个页面在PC端和移动端都能自动适应显示，并避免为不同设备分别设计页面，可以尝试以下方法：
响应式布局：
媒体查询（Media Query）：
使用Flex布局：
display: flex;属性，并结合flex-wrap、flex-direction、justify-content和align-items等属性，使得内容在不同屏幕尺寸下灵活调整布局。组件内部内容优化：
如果您希望在同一个页面中实现PC端和移动端的适配，并避免使用媒体查询，可以考虑使用响应式设计的方法。虽然这并不能完全避免编写重复的样式，但它可以减少工作量，并帮助您更好地控制不同设备的显示效果。
以下是一些实现响应式设计的建议：
1、使用相对单位：使用相对单位（如百分比、em、rem等）代替绝对单位（如px、pt等），可以使页面在不同设备上更好地适应其大小。
2、使用flex布局：Flex布局是一种非常强大的布局方式，可以轻松地实现不同屏幕尺寸下的布局适配。通过设置合适的flex属性，可以使容器内的元素在不同屏幕尺寸下自适应调整大小和位置。
3、使用CSS Grid布局：CSS Grid布局是一种二维的布局系统，可以轻松地实现复杂页面的布局。通过使用grid属性，可以使元素在不同屏幕尺寸下进行重排和调整大小。
4、使用媒体查询：虽然您不想使用媒体查询，但在某些情况下，媒体查询仍然是一种有效的解决方案。通过编写针对不同屏幕尺寸的CSS样式，可以实现更加精确的布局控制。
5、使用第三方库：有一些第三方库可以帮助您快速实现响应式设计，例如Bootstrap、Foundation等。这些库提供了预设的CSS样式和组件，可以大大简化响应式设计的实现过程。
可以使用响应式布局来解决这个问题，通过设置容器的宽度为100%并使用媒体查询来控制不同屏幕尺寸下的显示方式。
以下是一个示例代码，你可以根据需要进行修改和调整：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width: 100%;
max-width: 1200px; /* 设置最大宽度 */
margin: 0 auto; /* 居中显示 */
}
/* 默认显示方式 */
.content {
display: block;
}
/* 移动端显示方式 */
@media (max-width: 768px) {
.content {
display: flex; /* 设置为弹性布局 */
flex-direction: column; /* 垂直排列 */
}
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- 文本内容 -->
<p>这里是岗位标准化流程说明的内容。</p>
<!-- 图片 -->
<img src="your_image.jpg" alt="图片描述">
</div>
</div>
</body>
</html>
在上述代码中，我们使用了.container类来包裹整个页面内容，并设置了宽度为100%。然后，通过媒体查询@media (max-width: 768px)来检测屏幕宽度是否小于等于768像素（通常为移动设备的宽度），如果是，则将.content类的显示方式设置为弹性布局（display: flex）并垂直排列（flex-direction: column）。这样，在移动端显示时，文本和图片会垂直排列，并且可以通过缩放来适应屏幕大小。
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
