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

admin  11月前
0

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:13333333333等这样的号码来触发打电话。

(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弹出这些按钮。

回复 0  
游客  现在


二维码