2025年媒体查询视口小于400px怎么写（2025年视口显示范围）

移动端,PC端是怎么做适配的?

1、使用viewport缩放方案，如设置initialscale、maximumscale、minimumscale和userscalable等属性。可以采用阿里团队的高清方案，通过设置viewport的缩放比例来保证高清效果，解决1px物理像素问题。采用两套页面分别适配：为移动端和PC端分别设计不同的页面，以确保最佳的用户体验。

2、前端适配PC端和移动端的方法主要包括响应式布局和分端适配两种。其中，响应式布局是一种灵活的网页设计方式，通过媒体查询来实现页面在不同设备上的自适应。这种方式特别适用于一些较为简单的网站，例如企业宣传网站，能够简化开发流程，减少维护成本。

3、步骤1：定位移动端网页在移动设备（如手机）上打开目标网页，确认其处于移动端显示模式（页面布局通常较简洁，适配小屏幕）。例如，打开一篇百度经验，其移动端页面会以简化形式呈现。步骤2：切换至PC版模式（可选）部分网页支持通过浏览器设置或内置按钮切换显示模式。

4、移动端适配：移动端视口有布局视窗、视觉视窗和理想视窗，通过调整viewport来控制页面缩放，如使用阿里团队的高清方案。方案一中，通过设置viewport的缩放比例来保证高清效果，解决1px物理像素问题。方案二则是采用两套页面分别针对移动端和PC端。方案三推荐使用postcss-pxtorem和amfe-flexible进行工程化配置。

5、使用标签是实现网页自适应PC端和移动端的关键一步。同时，还需要结合CSS媒体查询、流式布局、弹性盒模型和网格布局等技术和方法来共同实现网页的自适应。通过这些技术和方法的综合运用，可以确保网页在不同设备上都能有良好的显示效果和用户体验。

css样式布局及rem用法梳理

1、弹性盒模型布局flex 这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式。rem布局 rem是一种相对长度单位，通过这个长度单位可以实现元素宽高等比例缩放，从而完成不同宽度屏幕的适配。

2、用法：在CSS中，rem常用于设置全局的字体大小、边距等，以实现跨设备的相对布局。例如，font-size： 1rem； 表示当前元素的字体大小为根元素字体大小（即html元素的字体大小）。特点：rem的值是相对于根元素的字体大小而言的，因此它不会随着页面或元素的嵌套层级而改变。

3、当html的font-size设为20px时，1rem=20px；设为40px时，1rem=40px。页面元素（如按钮）的宽高若以rem为单位（如width： 3rem），则其实际尺寸会随根字体变化而自动调整，无需修改CSS代码。

4、定义：基于父元素的字体大小，如未设置，浏览器默认16px。1em等于当前父元素的fontsize值。用途：根据父元素的大小调整，常用于文本尺寸和布局。特点：整个页面内的1em不是固定值，依赖于父元素的fontsize。rem 定义：相对于HTML元素的字体大小，CSS3新增。用途：可用于非根元素，便于统一调整全局尺寸。