- 3293
-
-
-
-
-
这阵子在群里，发现很多朋友已经开始设计微信网站或是webapp项目了，他们大多数都是第一次来弄这些，所以很想看看有没有相关的WebAPP或是手机网站的案例，可以用来借鉴和学习。有些app设计跟web前端也想了解这块的教程。所以今天，25学堂打算出一些关于WebAPP（手机网站）的基础性的教程，帮大家扫扫盲！O(∩_∩)O~
随着智能手机和智能设备的普及，从而影响了我们日常的办公和生活设备，而不是单纯的是pc端。智能手机和其他智能产品也成为了我们的移动终端。
WebAPP（手机网站）第一个知识点：什么是css媒体查询
网站设计的一个新趋势是使用media queries（媒体查询），这是因为如今有大量的设备可以访问因特网，因此所有的网站都需要适应各种设备。responsive design（响应设计）应运而生。它可以发现用户使用的是什么设备，并调整设计内容以适应设备。
CSS3给我们带来了许多有助于web设计的新功能，其中之一便是提高了网站可用性的Media Queries。
下面是我们必须会常用到的一些CSS媒体查询元素：
- width 视口宽度
- height 视口高度
- device-width 设备屏幕的宽度
- device-height 设备屏幕的高度
- orientation 检测屏幕处于横屏还是竖屏
- aspect-ratio 基于视口的宽高比例
- device-aspect-ratio 基于设备屏幕的宽高比
- color 颜色的位数，如min-color：32 匹配设备是否有32位或以上的颜色
- color-index 设备的颜色索引表中的颜色数
- monochrome 检测单色振缓冲区中每像素使用的位数。为非负数，如monochrome：3
- resolution 检测屏幕或打印机的分辨率，如min-resolution：300dpi(dpi后面会介绍)，也可以是每厘米像素点的度量值，如min-resolution：120dpcm
- scan 扫描方式，值为progressive（逐行扫描）、interlace（隔行扫描）
- grid 检测输出设备是网格设备还是位图设备
创建媒体查询时，上述特性（scan和grid不行）都可以加上min和max前缀创建媒体查询的范围。除了link标签能够进行媒体查询，是不是还有其它的呢，答案是Yes 。html中的meta标签，此前我们25学堂之前介绍过的这个：meta标签在移动平台的响应式设计
CSS媒体查询用于找出屏幕当前的最大分辨率，并允许你根据分辨率使用不同的CSS。这个特点叫做responsive design，它能找出用户当前使用的分辨率并通过CSS媒体查询对其做出响应。
过去，我们让网站适应各种分辨率的唯一方法就是使用fluid page design（流体网页设计），但是CSS媒体查询具有更多的功能。
通过使用CSS媒体查询 你可以在小屏幕上隐藏侧边栏以展示更多的内容，也可以在大屏幕上增大字体，这些都无法用fluid page design来实现。
讲了这么多，有人可能会疑惑为什么这些都不是用在CSS中的？别急，慢慢来，现在就介绍如何在样式中运用，按照上述屏幕分辨率的四种划分，我们可以看到基本可以舍弃ldpi了。
/* 中分辨率屏幕 */
/*高分辨率屏幕*/
/*超高分辨率屏幕（传说中的Retina屏）*/
上面就是在css中的用法，把我们需要的css代码包含在大括号中就能用了，是不是很方便的样子%>_<%。当然我们还可以用到之前提供的几个特性，如下：
针对视口宽度不大于768像素的情况加载大括号中的样式。
CSS的动态改变
通过使用CSS我们可以为不同的元素以及这些元素的不同属性增加animation（动画效果）。
使用media queries的主要目的之一是改变元素的大小以适应网页。众所周知，改变大小的过程可以产生动画效果，我们可以使用如下代码为CSS的Width 和 Height属性添加动画
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;
/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 1s;
/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 1s;
在你的media queries元素中添加以上代码，从而在改变大小时产生动画效果。
具体的CSS3查询媒体动画效果案例：demo
下面是关于web APP或者手机网站的小技巧
（1）、如何禁止用户旋转设备
这里其实是想告诉你在浏览器里办不到，因为禁止开发者阻止浏览器的orientationchange事件。
（2）、设置拨打电话号码代码
可以用tel：13888888888等这样的号码来触发打电话。
（3）盒子边框溢出
当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条，这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。
（4）、ios数字颜色样式超过9位后失控
这个问题我不知道该怎么描述，就是在ios中，当数字超过9位数时，浏览器会给这个数字默认加上一个颜色，无论你设置什么颜色都无效。
（5）、iOS可禁止用户在新窗口打开页面
在项目开发中，有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self”指定在当前页面打开，但是在iOS中长按链接一段时间后，系统会弹出一个对话框，用户可以通过点击”在新页面中打开”来在新窗口打开页面，这样我们指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout属性为none来禁止iOS弹出这些按钮。
CSS3媒体查询官网手册地址：
全站高品质素材免费下载！
