当前位置: 首页 >> WEB前端开发|DIV+CSS|javascript|AJAX >> 阅读正文

WebAPP和手机网站制作入门教程之CSS3媒体查询

这阵子在群里,发现很多朋友已经开始设计微信网站或是webapp项目了,他们大多数都是第一次来弄这些,所以很想看看有没有相关的WebAPP或是手机网站的案例,可以用来借鉴和学习。有些app设计跟web前端也想了解这块的教程。所以今天,25学堂打算出一些关于WebAPP(手机网站)的基础性的教程,帮大家扫扫盲!O(∩_∩)O~

25xuetang

随着智能手机和智能设备的普及,从而影响了我们日常的办公和生活设备,而不是单纯的是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媒体查询官网手册地址:

http://www.w3.org/html/ig/zh/wiki//CSS3媒体查询

本文标题:WebAPP和手机网站制作入门教程之CSS3媒体查询

本文地址:http://www.25xt.com/webdevelop/4547.html

本文关键词:

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。