rem等比缩放下的横竖屏适配方案
移动端开发中，使用rem进行页面布局时，横竖屏切换 often 导致显示效果差异显著。本文提供一种有效的解决方案，利用CSS媒体查询控制最大宽度，确保不同屏幕方向下保持一致的布局。
问题描述：采用rem等比缩放后，横竖屏下页面显示效果差异较大，如何解决？
解决方案：通过CSS媒体查询限制最大宽度，从而在不同屏幕方向下保持一致的布局。
示例代码：
@media screen and (min-width: 640px) {
html {
max-width: 640px !important;
margin: 0 auto !important;
}
}
代码解释：当屏幕宽度大于或等于640像素时，该样式生效。max-width: 640px 限制HTML元素的最大宽度为640像素，margin: 0 auto 实现水平居中显示。 这样，无论横屏还是竖屏，页面内容都将在640像素的宽度内等比缩放显示，从而避免布局错乱。 !important 确保该样式具有最高的优先级。
通过这种方法，可以有效解决rem等比缩放在横竖屏切换时出现布局差异的问题，提升用户体验。 当然，具体max-width的值需要根据实际页面设计和内容进行调整。
