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

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