移动设备网页开发的经验

左侧固定宽度&＃xff0c;右侧自适应

因为手上没要紧事情&＃xff0c;今天哲哥让我帮忙处理下前端的事情&＃xff0c;拿到psd之后&＃xff0c;感觉有点头大&＃xff0c;以前虽然写过前端&＃xff0c;可那是很久以前的事情了。一般情况下&＃xff0c;能抄就抄&＃xff0c;导致自己前端技能几乎荒废。但是没办法&＃xff0c;还是得写&＃xff0c;以后再次面对情况&＃xff0c;可以自己处理了。

1、首先是面对psd&＃xff0c;把图片取出来&＃xff0c;这个不再表述&＃xff0c;在杨明的帮助下&＃xff0c;自己初步掌握了方法&＃xff08;网上有了解到可以用imageready直接导出&＃xff0c;因时间关系&＃xff0c;没有实践&＃xff0c;暂时记录&＃xff0c;有兴趣的可以去试试&＃xff09;。

2、这时候&＃xff0c;可以动手制作html页面了。冰哥首先跟我提了几个要点&＃xff1a;这个页面是面向移动设备的&＃xff0c;所以要兼容多种显示设备&＃xff0c;比如平板、手机。因为差距很大&＃xff0c;各分块尽量使用百分百&＃xff0c;字体尽量使用em&＃xff0c;这样&＃xff0c;可保持总体一致。

在制作的过程中&＃xff0c;我遵循使用百分百的方法去制作&＃xff0c;可标题部分我发现不能简单使用百分百&＃xff0c;因为标题只两个字&＃xff0c;如果真按百分百分配&＃xff0c;效果不兼容各种设备。

我为这个问题纠结了半天&＃xff0c;到群里面问了&＃xff0c;也没有要到自己要的答案。冰哥比较忙&＃xff0c;也只能自己调试。

不过&＃xff0c;当时有个人给了这样一种参考答案

试了下&＃xff0c;依然不行&＃xff0c;不过人家的min-width&＃xff0c;max-width这种思想&＃xff0c;我是第一次看到&＃xff0c;也放这里了。

回家之后&＃xff0c;发现这个问题不就是&＃xff1a;左侧固定&＃xff0c;右侧自适应吗&＃xff0c;然后&＃xff0c;在网上搜了下&＃xff0c;就解决了这个小问题。

3、其他小问题。

文本区域&＃xff0c;高度不能使用百分百&＃xff0c;这个无效&＃xff0c;暂时先记录。

4、自己的习惯问题

没有使用css&＃xff0c;没有样式与内容相分离&＃xff0c;自己的这个习惯&＃xff0c;一定得改。

总结&＃xff1a;

①在移动设备中&＃xff0c;几乎可以不考虑兼容&＃xff08;谷歌浏览器的select的option部分&＃xff0c;字体无效&＃xff0c;但是火狐浏览器正常&＃xff0c;虽不影响使用&＃xff0c;但影响美观&＃xff09;。

②在

③总感觉自己制作的页面离效果图差了很多&＃xff0c;每个部分差了点&＃xff0c;就导致整体效果差很多。

高度、背景、宽度等都直接影响最终效果。

路漫漫其修远兮&＃xff0c;吾将上下而求索&＃xff01;