antdesignvue手机怎么适配

Posted 2023-04-17

1. 使用媒体查询，在样式文件中添加媒体查询，根据不同的设备宽度设置不同的样式；
2. 使用flexible.js，自动根据设备宽度调整根元素的font-size，从而实现移动端适配；
3. 使用vw单位，将元素的宽度和高度设置为vw单位，从而实现移动端适配；
4. 使用lib-flexible，自动根据设备宽度调整根元素的font-size，从而实现移动端适配。 参考技术A antdesignvue手机适配方法如下:
目标一 、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿

目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作 参考技术B 1. 采用容器单位rem
在页面中引入一段js，根据屏幕宽度动态改变html字体大小，然后实现rem单位。

2. 使用flexible库
采用lib-flexible库，同时它会拦截加载响应的rem.js，实现安卓机和苹果机的自适应。

3. 采用vw适配
vw单位是一个相对单位，它的计量单位是视口宽度的1/100，一般情况下vw单位会比rem单位更加轻便，可以使用postcss和sass等工具来实现vw的自动转换 参考技术C 1、首先选用flex布局，让页面在不同分辨率下都能够完美适配。
2、使用rem来代替px，实现屏幕自适应，也就是网页布局的尺寸可以根据用户的屏幕尺寸自动调节。
3、采用媒体查询，让不同的屏幕尺寸下使用不同的样式。
4、采用视口元素viewport，可以在不同的设备中设置不同的缩放比例，让页面能在不同的屏幕上看起来更加美观。 参考技术D 1. 使用媒体查询，可以根据不同的屏幕尺寸设置不同的样式，从而实现响应式布局。
2. 使用flex布局，可以让元素根据屏幕尺寸自动调整大小，从而实现响应式布局。
3. 使用viewport元标签，可以让页面在不同的设备上显示正确的尺寸，从而实现响应式布局。
4. 使用rem单位，可以根据屏幕尺寸自动调整字体大小，从而实现响应式布局。

新博客手机适配的问题

原文引自

http://www.cnblogs.com/moondark/p/3607825.html#commentform

感觉挺漂亮的，就是手机上适配出了问题

请教了公司前端大牛。学习了下前端适配解决的思路

1.查看排版问题

2.查看是不是那个块出了问题。

3.试着改CSS样式表

具体来说我用谷歌浏览器先使用正常情况查看各个块是怎么排版的。之后切换成手机模拟器再查看样式。

然后找到是main这个块出了问题。它的width的样式不知道怎么被干掉了。修改成!important解决！