MobileAndPC

移动版网页和PC版网页的对比

1、移动版网页和PC版网页而最明显的差异就是屏幕的尺寸大小、分辨率较低，可以任意切换成水平线上或垂直显示，而且是以触控操作为主；移动设备的执行速度较慢、上网宽带小，若网页包含容量过大的图片或视

频，可能无法显示；要的功能浏览器并不支持PC版网页普遍使用的Flash动画，但是移动版浏览器对于HTML5 的支持程度则比PC版浏览器更好。对于万和城那个两者的切换，可以通过JavaScript来实现。

2、移动版网页的设计的原则

1、确认移动版网页的内容
2、确认主题、品牌货产品的形象
3、移动版网页的分层架构不要太多层
4、把握简明扼要的原则，移动版网页要列出重点，文件越小越好，并尽量减少使用动画、视频、大图片或JavaScript程序代码，一面用户等的不耐烦或JavaScript程序代码超过运行的时间限制而被强制关闭，建议使用CSS3来设置背景、渐层、透明度、框线、阴影、变形、颜色、文字尺寸等效果。
5、iOS操作系统从一开始不支持Flash动画，因此移动版的网页最好不要使用Flash动画。
6、采用单栏设计，比较容易阅读；此外，建议采用直列式的折叠目录来呈现多个主题。
7、移动版网页上的按钮要姓名容易触碰，最好还有有视觉反馈，在用户触碰按钮时，就产生颜色变化，一边让用户知道已经成功的点击按钮；而且在加载网页时可以加上说明或图案，让用户知道网页正在加载。
8、移动版网页上的文章尺寸要比PC版网页打，建议在14级自豪以上，以提高可读性，不同的操作系统或机型可能显示不同的效果，必须实际在移动设备上做测试。

3、响应式网页设计（RWD）

响应式网页设计童话村那个是通过CSS来实现，主要的技巧如下：

1）媒体查询（Media Query）

@media screen {
  h1{color:green;}
}
制定媒体类型为screen时，将标题1显示为绿色
media print{
  h1{color:red;}
}
制定媒体类型为print时，将标题1显示为红色

2）按比例缩放元素：在指定图片或对象等元素的大小时，请按照其父元素的大小比例进行缩放，而不要指定绝对大小。

<div data-role="content">
	<img src="pice.jpg" width="100%">
	<p>“乔巴”-梦想成为能治百病的神医</p>

</div>

3)非固定的版面配置：

@media screen and (max-width:480px){
  div{columns:1}
}
宽度小于480像素时，就领版面包含一个字段（手机）
@media screen and (min-width:481px) and (max-width:768px){
  div{columns:2}
}
宽度结余481~768像素时（例如平板电脑），就领版面包含两个列
@media screen and (min-width:769px){
  div{columns:3}
}
当浏览器的宽度大于769像素时（台式计算机或笔记本电脑），就令版面包含三列