手机精品网站制作方法

卖贝商城 2017-04-26 08:20:39 309

手机精品网站制作方法

随着智能手机和智能设备的普及，从而影响了我们日常的办公和生活设备，而不是单纯的是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代码包含在大括号中就能用了，是不是很方便的样子%>_