开发者社区> 问答> 正文

学习手机端网站制作,有没有好的书籍推荐?跟PC端网站前端有啥不一样的?

大家好,真诚求教个问题:

手机端的网页制作,有没有权威书籍推荐?

手机端网站跟PC端制作,有哪些不同?

我找了半天,也没有看到这方面很详细全面的书籍,求高手指点!

展开
收起
杨冬芳 2016-06-17 10:39:58 2001 0
1 条回答
写回答
取消 提交回答
  • IT从业

    PC版的网站普遍width宽度都是固定的,比如常用的980px。一般情况下,PC显示器的分辨率像素px可以认为等价于CSS里像素的值,但手机上就不一样了,比如5英寸1080P(1920×1080)分辨率的手机比如小米4,其window.document.body.clientWidth也就是viewport的width只有360px,显然,手机上的CSS中的1px并不等于手机屏幕的1px。

    所以,手机版网站,特别之处就在于要做宽度自适应,先来一句声明:

    该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放.

    布局方法:
    1、width:320px; 固定宽度居中,在iPhone4上效果刚好,但大一点的手机,两边就会有空白,所以这样搞感觉不好。
    2、min-width:320px; max-width:480px; width:100%; 最小宽度320px,最大宽度480px,在320px和480px之间自动适应宽度,看起来还行。容器里面的块,你同样可以用百分比布局,比如左边的60%,右边的40%,就算是图片,在合理范围内,宽被拉伸,影响也不大,我现在就用这招。
    3、@media(媒体查询),segmentfault.com用的就是这招,有点编程的味道,有点复杂,个人不感冒。
    4、rem等比例适配所有屏幕:
    html{ font-size: 20px; } .btn { width: 6rem; height: 3rem; }
    这里.btn的6rem等于6×20px=120px。你可以用window.document.body.clientWidth拿到屏幕宽度,然后根据屏幕宽度设置html的font-size的值,从而实现调整整个页面的rem值。这个也有点复杂,我也没用。
    5、设置viewport进行缩放:以320px宽度为基准进行缩放,最大缩放为320*1.3=416,方法简单粗暴又高效。

    Firefox的响应式设计视图(Ctrl+Shift+M)和Chrome的设备模式都能调试移动端网页。

    参考: http://isux.tencent.com/web-app-rem.html

    2019-07-17 19:42:10
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Tangram 立即下载
360手机卫士 插件化漫谈 立即下载
手机京东Crash自动分析处理系统 立即下载