如何写移动端网页

Posted 2020-09-06

　　呃呃，新手刚做完pc端就要考虑做手机端了，一个不做手机端的前端不是一个好前端，那么今天就说说如何前端制作手机端网页：

　　肯定很多人（新手）在考虑如何用html写手机端，该如何布局，又该如何设置字体单位，肯定有很多人上网搜了，包括lz都上网查找了相关资料，但是

很多描述手机端的资料都已年代久远（1314年的好多，，，哭）。

　　首先想写手机端肯定少不了<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />这一句

意思是什么自己去查，关于布局，网上有说rem布局的，有说%布局的，那么根据我自己做手机端的经验来说，虽然2个都可以，但宽度我喜欢用%，margin，padding一些值时用em，

关于字体，肯定是用em的好，你想想em的解释是什么，不就是根据窗口大小相应的调整字体吗，那么正好适合我们用手机端字体单位。还有写手机端用一些语义化标签为好

列举一下把

头部　　header

中间　　main

底部　　footer等等...

还有写手机端注意继承性的问题，最好是单独取类名，其他到与pc端没什么区别，当然你想做响应式的话可以用@media，给他body个最小宽度（320px）,其他就让他自适应吧。。

最后上段代码，给大家参考

body{
min-width: 320px;
}

header{
width: 100%;
height: 40px;
}

.nav_main{
width: 100%;
height: 9em;
overflow: hidden;
margin: 0.4em 0 0;
}

 

补充一下（外面的div用百分比，高度用em就好）