用CSS来实现网页自适应设计

最新推荐文章于 2024-06-25 22:50:37 发布

sxty0220

最新推荐文章于 2024-06-25 22:50:37 发布

阅读量1k

点赞数

分类专栏：技术

技术专栏收录该内容

23 篇文章 0 订阅

订阅专栏

目前来说，我们的网站一般会遇到制作一个移动版的网站——手机web，叫法很多：3G版、触屏版等。而通过什么以下这种方式来实现比较容易。
需要用到的CSS元素：CSS3 Media Queries
下边是media标签的10个值，可见常用的并不多。当没有media标签时，默认为media="all"。
all-- 用于所有设备类型
aural-- 用于语音和音乐合成器
braille-- 用于触觉反馈设备
embossed-- 用于凸点字符（盲文）印刷设备
handheld-- 用于小型或手提设备
print-- 用于打印机
projection-- 用于投影图像，如幻灯片
screen-- 用于计算机显示器
tty-- 用于使用固定间距字符格的设备。如电传打字机和终端
tv-- 用于电视类设备
在上边引用css样式时，我们引用了两次。我们完全可以引用一个css样式来达到我们的目的，这样也可以提高css样式加载速度,实现代码如下：

http://m.puercn.com/

 
   001@media all and (max-width: 320px) {
 
   002.tu ul .thumb {
 
   003    width: 98%;
 
   004    margin: 1%;
 
   005}
 
   006.subhead ul li {
 
   007    width: 28%;
 
   008}
 
   009.show .content .tu {
 
   010    width: 100%;
 
   011}
 
   012.lanmu ul .thumb {
 
   013    width: 98%;
 
   014}
 
   015.list ul .thumb {
 
   016    width: 98%;
 
   017}
 
   018.bjia ul {
 
   019    width: 99.9%;
 
   020}
 
   021.show .content .nr img {
 
   022    width: 98%;
 
   023}
 
   024}
 
   025@media all and (min-width: 320px) and (max-width: 500px) {
 
   026.tu ul .thumb {
 
   027    width: 45.72%;
 
   028    margin: 1%;
 
   029}
 
   030.subhead ul li {
 
   031    width: 21%;
 
   032}
 
   033.show .content .tu {
 
   034    width: 85%;
 
   035}
 
   036.lanmu ul .thumb {
 
   037    width: 45.72%;
 
   038}
 
   039.list ul .thumb {
 
   040    width: 45.72%;
 
   041}
 
   042.bjia ul {
 
   043    width: 99.9%;
 
   044}
 
   045.show .content .nr img {
 
   046    width: 90%;
 
   047}
 
   048}
 
   049 @media all and (min-width: 500px) and (max-width: 600px) {
 
   050.tu ul .thumb {
 
   051    width: 30.26%;
 
   052    margin: 1%;
 
   053}
 
   054.subhead ul li {
 
   055    width: 16.2%;
 
   056}
 
   057.show .content .tu {
 
   058    width: 70%;
 
   059}
 
   060.lanmu ul .thumb {
 
   061    width: 30.26%;
 
   062}
 
   063.list ul .thumb {
 
   064    width: 30.26%;
 
   065}
 
   066.bjia ul {
 
   067    width: 99.9%;
 
   068}
 
   069.show .content .nr img {
 
   070    width: 80%;
 
   071}
 
   072}
 
   073 @media all and (min-width: 600px) and (max-width: 800px) {
 
   074.tu ul .thumb {
 
   075    width: 21.2%;
 
   076    margin: 1%;
 
   077}
 
   078.subhead ul li {
 
   079    width: 11%;
 
   080}
 
   081.show .content .tu {
 
   082    width: 60%;
 
   083}
 
   084.lanmu ul .thumb {
 
   085    width: 21.2%;
 
   086}
 
   087.list ul .thumb {
 
   088    width: 21.2%;
 
   089}
 
   090.bjia ul {
 
   091    width: 47%;
 
   092}
 
   093.show .content .nr img {
 
   094    width: 75%;
 
   095}
 
   096}
 
   097 @media all and (min-width: 800px) and (max-width: 960px) {
 
   098.tu ul .thumb {
 
   099    width: 16.66%;
 
   100    margin: 1%;
 
   101}
 
   102.subhead ul li {
 
   103    width: 9.2%;
 
   104}
 
   105.show .content .tu {
 
   106    width: 50%;
 
   107}
 
   108.lanmu ul .thumb {
 
   109    width: 16.66%;
 
   110}
 
   111.list ul .thumb {
 
   112    width: 16.66%;
 
   113}
 
   114.bjia ul {
 
   115    width: 30%;
 
   116}
 
   117.show .content .nr img {
 
   118    width: 70%;
 
   119}
 
   120}
 
   121 @media all and (min-width: 960px) and (max-width: 1024px) {
 
   122.tu ul .thumb {
 
   123    width: 13.62%;
 
   124    margin: 1%;
 
   125}
 
   126.subhead ul li {
 
   127    width: 7.5%;
 
   128}
 
   129.show .content .tu {
 
   130    width: 40%;
 
   131}
 
   132.lanmu ul .thumb {
 
   133    width: 13.62%;
 
   134}
 
   135.list ul .thumb {
 
   136    width: 13.62%;
 
   137}
 
   138.bjia ul {
 
   139    width: 25%;
 
   140}
 
   141.show .content .nr img {
 
   142    width: 60%;
 
   143}
 
   144}

1、link方法引入

`1`	`<link` `rel="stylesheet"` `type="text/css"` `href="../css/print.css"` `media="print"` `/>`

2、xml方式引入

`1`	`<?xml-stylesheet` `rel="stylesheet"` `media="screen"` `href="css/style.css"` `？>`

3、@import方式引入
@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在<head></head>中的<style>...</style>中引入，单这种使用方法在ie6-7都不被支持。如

样式文件中调用另一个样式文件：

`1`	`@import url("css/reset.css") screen;`

`2`	`@import url("css/print.css") print;`

在<head></head>中的<style>...</style>中调用：

 
   1<head>
 
   2    <style type="text/css">
 
   3 @import url("css/style.css") all;
 
   4    </style>
 
   5  </head>

4、@media引入

这种引入方式和@import是一样的，也有两种方式：

样式文件中使用：

 
   1  @media screen{
 
   2    选择器{
 
   3属性：属性值；
 
   4    }
 
   5  }

在<head>>/head>中的<style>...</style>中调用：

 
   1<head>
 
   2    <style type="text/css">
 
   3 @media screen{
 
   4           选择器{
 
   5      属性：属性值；
 
   6    }
 
   7 }
 
   8    </style>
 
   9  </head>

以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别，我就不说了，想了解的大家可以去找度娘或Ｇ爸，他们能帮你解决。

媒体特性（Media Query）

前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。
为了更能理解Media Query，我们在次回到前面的实例上：

`1`	`<link` `rel="stylesheet"` `media="screen and (max-width: 600px)"` `href="small.css"` `/>`

转换成css中的写法为：

 
   1@media screen and (max-width: 600px) {
 
   2    选择器 {
 
   3      属性：属性值；
 
   4    }
 
   5  }

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：

1、Media query只接受单个的逻辑表达式作为其值，或者没有值；

2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；

3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况；

4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种。

下面我们一起来看看Media Queries的具体使用方式：

一、最大宽度Max Width

二、最小宽度Min Width

三、多个Media Queries使用

四、设备屏幕的输出宽度Device Width

五、iPhone4

六、iPad

七、android

/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

八、not关键字

九、only关键字

十、其他

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

关于Media Query：Media Query能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。

本文出自空泽宇 - 维度和指标运营，转载时请注明出处及相应链接。

sxty0220

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用CSS来实现网页自适应设计

目前来说，我们的网站一般会遇到制作一个移动版的网站——手机web，叫法很多：3G版、触屏版等。而通过什么以下这种方式来实现比较容易。需要用到的CSS元素：CSS3 Media Queries下边是media标签的10个值，可见常用的并不多。当没有media标签时，默认为media="all"。all-- 用于所有设备类型 aural-- 用于语音和音乐合成器 braille
复制链接

扫一扫

专栏目录