码迷,mamicode.com
首页 > 移动开发 > 详细

如何写移动端网页

时间:2017-03-23 16:47:06      阅读:717      评论:0      收藏:0      [点我收藏+]

标签:flow   相关   前端   网页   ice   imu   height   其他   解释   

  呃呃,新手刚做完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就好)

如何写移动端网页

标签:flow   相关   前端   网页   ice   imu   height   其他   解释   

原文地址:http://www.cnblogs.com/yangjiansong/p/6605808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!