手机精品网站制作方法
手机精品网站制作方法
随着智能手机和智能设备的普及,从而影响了我们日常的办公和生活设备,而不是单纯的是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代码包含在大括号中就能用了,是不是很方便的样子%>_
卖贝商城更多商品介绍:金投网黄金频道金融广告投放建议 百度百科创建新词条 北京电视台科教非常幽默广告投放