手机网页代码设计

1、网页设计中，如何让页面自适应手机端？

一般来说，通过CSS3，可以直接对不同分辨率下的样式进行定义，比如如下的代码。
/* PC或中大型笔记本设备 desktop */ @media all and (min-width: 1201px) { .title-desktop{ display: block !important; } .container { width: 1100px; } } /* 中小型笔记本或大平板 laptop */ @media all and (min-width: 980px) and (max-width: 1200px) { .title-laptop{ display: block !important; } .container { width: 920px; } }
但是上面的方法，可能不会兼容老版本ie。
所以也可以通过js，识别当前页面的分辨率，来给出样式，这种比较好也比较复杂，代码量很多但是一般没有兼容问题。

2、有关手机网页设计的问题

你这是做的鼠标经过效果，而在手机上是不存在经过事件的，只有点击事件。所以你版点击相权当于经过。但是没办法用获取 鼠标离开。所以就一直出现了。
你要改成JQ代码。
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<script>$("#nav>li").click(function(){ $("#nav>li>ul").toggleClass("on");});</script>
把你CSS的77行代码 ：
#nav li:hover > ul { display: block;}
改成
.on {display:block}

3、手机网页设计多大好?

wap页面设计一般都是宽度自适应的，最窄以兼容320px为标准，最宽1280px为标准，
一般的智能手机宽度都是320，480，640这些，
其中iPhone就不用说了吧，必须是480px，
其他三星啊，htc啊什么的，各类分辨率都有，基本不会比480低，
但是之前刚开始的一些智能手机大部分都是320，所有要兼容320哦~~~

4、自适应手机屏幕代码

自适应手机屏幕代码：

<meta name="viewport" content="width=device-width">
<meta
name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

首先就是自适应（说白了就是用百分比来设宽度），最外框肯定是用百分比的，但是一些小的部分就不能用百分比了，不然就会变形，就比如你说的图片，图片尽量定死了，不然不同的手机屏幕大小不一定，所显示的就不一样，甚至会变形了。你可以通过控制图片外面的DIV来控制位置，让它在符合美学的位置。

(4)手机网页代码设计扩展资料：

CSS+DIV网站设计的问题

尽管CSS+DIV具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在：

第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。

第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox
）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在 ）。CSS+DIV还有待于各个浏览器厂商的进一步支持。

第四，CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

参考资料：网络.代码

5、手机端网页设计尺寸多少

iPhone手机网页的设计尺寸

iPhone5尺寸是640x1136px分辨率是326PPI
iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

安卓网页的设计尺寸

320dp：一个普通的手机屏幕（240X320，320×480，480X800）
480dp：一个中间平板电脑像（480×800）
600dp：7寸平板电脑（600×1024）
720dp：10寸平板电脑（720×1280，800×1280）

ipad网页的设计尺寸

iPad第三代第四代尺寸是2048x1536px分辨率是264PPI
iPad第一代第二代尺寸是1024x768px分辨率是132PPI
iPad Mini尺寸是1024x768px分辨率是163PPI

6、手机网页设计排版需要注意的几个事项

我们对手机网站制作中需要注意哪些方面的问题展开分析，为各位手机网站制作的用户们提供一些参考，现总结几点如下：

1、明确自己想在手机网站上展示哪些信息：

在手机网站制作之前应该明确自己想在手机网站上展示什么，分析一下可能的浏览者会有哪些，然后有针对性地策划和设计网站上的相关内容，这样才能做到有的放矢，不至于手机网站制作好了却没人浏览，或者浏览了不感兴趣。如果能做到有针对性的进行手机网站制作，通常手机网站在推广之后都会为企业带来一定量的潜在用户。

2、在手机网站制作时要尽量符合滑动屏幕的方式：

一般的手机屏幕，画面都不如桌上电脑那么大，尤其是阅读文字时更需要加以放大。即使智能手机具有网页放大缩小功能，但是观看起来也较为麻烦，因为网页放大后，很可能还要左右滑动才能浏览网页，浏览后还要缩小回原大小。因此在设计手机网页时，应能够以滑动屏幕的方式来阅读网页，因为滑动网页操作比着放大网页观看来要简单得多。

3、不能参照PC端网站来设计手机网站上的导航功能：

手机网页与跟一般的PC端网页不同，由于受到手机屏幕大小和屏幕操作的限制，在设计导航功能时应该按照手机屏幕来设计，不能完全照搬PC端网站，该简单的地方简单化，该去掉的去掉，同时在当阅读文章到最后时，要方便于用户回到最前头，减少卷动画面的机会，让网页变得更容易于移动设备上阅读。

4、手机网站制作也要考虑多种浏览器的兼容：

现在的移动浏览器能够处理大多数网站，一般的浏览器都能够正常浏览网页。但由于手机上的浏览器也有多种，比如UC浏览器、360浏览器、搜狗浏览器、其他浏览器，如此多的浏览器在浏览网页的时候，如果手机网站的兼容性差，就很可能会出现在某些浏览器上出现网页变形、内容显示不全的情况。因此，手机网站制作必须考虑到兼容于多种浏览器。

5、在手机网站制作时一定要减少用户文字输入操作：

现在智能手机一般都没有实体的键盘，或仅只有12键的电话输入功能，因此在输入文字上会比起使用电脑键盘麻烦得多。因此，减少使用者输入文字的机会，例如用户名、密码等，都是手机网站制作时要尽力避免的。

6、在手机网站制作时就应该考虑到日后的推广和宣传：

在手机网站制作时，不要忽略了用户体验，否则在日后的网站推广时将会遇到麻烦。任何一个手机网站，都必须经过广策划、设计和推广的过程，在手机网站制作时需要考虑日后的推广，手机网站应该在丰富站内内容的同时，提供详尽的产品信息以及联系方式，并收集有关产品的用户满意度和顾客需求方面的反馈信息。这样的手机网站上线后，其推广工作也会非常有效果。

7、手机网站制作要兼顾非触摸屏幕的设计：

虽然大多数手机都是智能手机，但也有为数不少的传统手机，不具备触摸的功能，使用的是传统的控制方向键做为滑动的工具，这时候，手机网页的制作应兼顾到非触摸屏的手机浏览。比如减少画面中超链接的数量、加大文字以减少误点。

8、在手机网站制作时要记得要简化网页内容：

一般的手机、平板电脑等移动设备，由于屏幕大小的限制，不易容纳下个人电脑的大容量的网页资讯，因此手机网站制作的首要一点就是减少网页内容，最好不用图片或是影音视频等，文字也应该精简，但要保持网页内容的可读性。只需要将最重要的资讯放入移动版网页，不太重要的内容内容，可以略去，或者通过超链接链接到新网页上。

9、手机网站制作要注重网页产品和服务的展示：

企业在手机网站上，需要表现的重点仍然是产品和服务的展示。移动用户访问企业手机网站往往是有备而来，想了解某个产品或者服务的详细价格、服务内容和功能。所以企业在手机网站上的产品和服务展示，可选择企业的主要产品，对其各类参数或价格加以详细说明，对于企业的新产品，也可以适当的加以介绍，必要时可以采用图文并茂的方式，但图片的体积应尽量小。

以上是在手机网站制作中需要注意的几个方面，手机网站页面设计需要符合用户体验，以方便用户操作为准则，能够为用户带来切实的帮助，这是手机网站制作上的基本要求，也是满足用户需求的基本原则。

7、手机网页应该怎样设计?

一、选用合适的字体。

手机网页设计成功离不开排版，排版应该获得和图片同样的重视。虽然可供选择的字体很多，设计师要考虑的方面很多，比如说，目标客户和客户公司的性质。为手机网站页眉和内容选用合适的字体是必不可少的，无衬线字体和有衬线字体通常会为设计带来良好的效果。除此之外，你还可以结合其它字体，专为孩子和女性打造网站。

二、选择合适的配色方案。

任何手机网站的设计都离不了合适的配色方案，这对创建一个整洁干净的网站同样适用。坚持使用淡色和非彩色的投影对成功设计一个简洁网站大有裨益。浅色的投影可以帮助用户把焦点转向网站内容。标志使用黑色和较深的投影，手机网页中的页眉和导航元素使用浅色背景，这些都是不错的案例，并没有规定在简洁网页设计中不能使用大胆的颜色，但是这样的颜色要小心，克制地使用。有时候，手机网站有必要使用深色背景色来吸引某些目标用户。比起渐变色，有些手机网站更钟爱纯色。如果你的手机网站非得要使用纹理和渐变色，也不要用得太过火。

三、提高页面加载速度，手机网站以简洁为主。

一般来说，手机网站在用户下载和浏览时要比PC端网站的速度慢得多，页面东西太复杂，会耗掉用户等待网站加载的耐心，尤其是导航栏要简短清晰，能够快速地指引用户浏览网站的深层信息。对于网站内容来说，简洁突出重点就好，所谓的内容越丰富越好已不适用于手机网站了。

四、避免使用弹窗。

无论是出于方便用户联系网站客服还是做些小广告的目的，都要尽可能避免弹出窗口的应用，手机网站本来加载速度就慢，再添加这些窗口，必然会影响用户体验，阻碍用户浏览网站的视线，进而占用用户流量，引起反感而放弃对网站的继续访问。

五、手机网站图片要适配设置。

从手机上浏览网站必然没有那么方便，操作也不如PC端灵活自如，前面也说到了使用网站设计技术可以解决网站适应屏幕的问题，网站图片也不例外，但为了用户能将页面使用图片的地方看得更加清晰，可采用整站缩放的模式，而不是用户点击单张图片的缩放模式，当然，手机网站能少用图片是最好的。 六、网站操作简单化。关于新页面的打开方式，最好采用当前页面显示的方式来设计，以免新窗口造成网站资源占用的负担，同时对于出现网站错误的现象最好设置提醒，让用户快速找到页面出口进行跳转，而不是不断地进行返回操作。

七、交互式的互动行为。

用户在移动客户端都喜欢进行留言，分享功能。特别是看到一篇很棒的帖子都会选择分享到朋友圈或者空间中，让朋友也参与里面。例如现在比较流行的做就是做微信公众号大咖们，往往一篇帖子都会造成几千人的持续浏览、点赞或者分享内容，粉丝喜欢中这种参与行为，因为这种圈子拉动粉丝在持续发酵中，用户慢慢都会舍不得离开。

8、手机端网页设计

meta标签是位于<head>标签中的一个设定网页的重要元素标签，
第一个meta标签代码一般用于手机端，因为每个手机型号的屏幕不一样，所以这个代码可以让网页自己适应手机端的屏幕大小显示。
第二个meta标签代码代表电话号码，手机号码，并检测手机号码的格式，手机可以识别点击然后自动拨号。