如何将现有的web页面适配移动端

Question

问题描述

如题，我接收了一个web项目，页面样式单位都是px，布局是左边侧边栏右边表格，因为没有在移动端/平板展示的需求就从没有做过适配，但是现在想要在平板移动端也展示良好，我在平板上看这个页面，侧边栏就占了一半，右边的表格因为用的element所以有点自适应的味道但是变得很窄。整个页面很不美观

问题出现的环境背景及自己尝试过哪些方法

请问现在要做成适配，大家都是怎么做的呀，是要去找那些写死的px改成rem吗？有没有相关的文章推荐一下呢

你期待的结果是什么？实际看到的错误信息又是什么？

想要我的页面在平板/移动端也展示友好，在已经有的项目上做最少的改动做到这一点（不考虑为移动端完全新写一个，太累了）

Answer 1

postcss-pxtorem 库可以帮你转成rem单位
但一般UI出的图也只能做个大概的参考 不是所有的值都跟他的图一摸一样的 还是要看整体效果

Answer 2

做响应式布局或者百分比布局

Answer 3

当前的项目的pc端应该是好的，如果盲目采用修改单位将px 换成 rem，或者全局替换之类的方式很可能造成不必要的麻烦，比如 1像素的边框，特定元素的圆角等等细节。

pc端和移动端 大体风格【配色，元素】应该差不多的

我建议：新建一个css文件，里面采用媒体查询；采用 rem 来处理整体布局和局部元素调整

Answer 4

媒体查询写一个 样式文件来处理 移动端咯