兼容手机的Html网页一般是怎么构建布局，是先随便写一个再根据@media的不同值逐个修改吗？

Question

1.兼容手机的Html网页一般是怎么构建布局，是先随便写一个再根据@media的不同值逐个修改（比如修改一个div的宽度，或者div的显示隐藏）吗？高度宽度这些一般怎么写？长度单位一般用什么？
2.一个已经写好的Html页面，如何改成兼容手机Html页面?

Answer 1

• 为了方便维护，你可以分离不同 @media 的代码，用覆盖样式的方式实现不同屏幕的差异化
• 采用 rem 作为长度单位，快速适配字体，宽度的差异
• 已经写好的HTML页面，需要先考究布局结构是否能够满足你适应手机的结构

Answer 2

emmm~现在很多现成的框架都支持响应式布局，比如bootstrap，react等等。如果自己实现的话肯定没有这些大公司实现的兼容性好，毕竟现在手机的机型实在是太多了，更何况还有pad这种。

Answer 3

首先，如果是响应式，兼容pc和手机端，那么第一件事情是，必须设计师懂响应式设计，哈哈哈哈哈哈，做不到那就没办法做的。
如果只是自适应手机端，那百分比啊rem啊各种方法呢

Answer 4

简单点单位就用rem

Answer 5

滥用@media会让你的项目难以维护，常见的方案有rem或者vw, vh，用rem需要根据设备尺寸动态改变根元素的font-size。

Answer 6

一般这种需要响应PC端和手机端的最好是设计稿要简洁，页面元素不复杂
否则如果仅仅只是根据设备的宽高来做适配的话，基本上都会导致页面很不协调

如果设计稿能够根据页面元素分别设计PC端和手机端的话是最好，当然设计师最好也是能够懂Web的响应式设计
做到设计稿PC端和手机端视觉上能够统一且布局合理