• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

css样式不止是浏览器

开发技术 开发技术 2周前 (06-08) 14次浏览

css样式表

css样式表,不只有浏览器

单词 media 媒体

​ screen 屏幕

​ device 设备

​ mobile 移动

​ orientation 方向

​ guarantee 保证

media属性

media 属性规定被链接文档将显示在什么设备上。

media 属性用于为不同的媒介类型规定不同的样式。

media属性值

screen 计算机屏幕(默认)

tv 电视剧类型设备(分辨率低、有限的滚屏能力)

porojection 放映机

handheld 手持设备

print 打印预览模式/打印页面

braille 盲人合成器

all 适用于所有设备

举例

使用css样式表,创建一个screen设备类型,这个查询是指定了有屏幕的设备而不是其他设备所以是screen,在创建一个“媒体查询”来指定设备类型,媒体查询要与设备匹配,所以是有屏幕宽度不能超过480像素。

<link href="loung-mobile.css" rel="stylesheet" media="screen and (max-device-width: 480px)">

这样也可以匹配一个打印机,媒体类型为print时才会使用,这说明要通过打印机查看页面。

<link href="loung-mobile.css" rel="stylesheet" media="print">

查询中还有其他属性可以使用

尺寸

min-device-width

max-device-width

orientation 方向

landscape 横向

portrait 竖屏

直接在css中增加媒体查询

要为css指定有特定属性的设备,还有一种方法,不是在link标签中使用媒体查询,还可以直接写在css中,下面给出一个例子:

根据下面可以理解为

min 大于等于后面数值

max 小于等于后面数值

/*使用media         媒体查询
对于与这个查询匹配的设备,将所有适用的规则放在大括号里面,所以如果设备大于等于480px就会使用下面的规则*/
@media screen and (min-device-width:481px){
    /*未达到屏幕尺寸480px就会让guarantee使用margin透明外边距向右移动250px*/
	#guarantee{
		margin-right:250px;
	}
}
/*如果设备屏幕小于等于480px则会使用下面的规则*/
@media screen and (max-device-width:480px){
    #guarantee{
        margin-right:30ox;
    }
}
/*如果打印机预览这个页面,就会使用这些规则*/
@media print{
    body{
        font-family:times,"times new roman",serif;
    }
}
/*所有其他规则应用于所有页面,因为他们并没有包含在一个@media里面*/
p.specials{
    color:red;
}

测试

通过下面的设备规格,设计一组媒体查询指定下面各个设备。

智能手机 480*640像素

<link rel="stylesheet" href="lounge-smartphone.css" media="screen and (max-device-width:479px)">

平板电脑 1024*768像素

<link rel="stylesheet" href="lounge-tablet-portrait.css" media="screen and (min-device-width:1024px) and (orientation:portrait)">
<link rel="stylesheet" href="lounge-tablet-landscape.css" media="screen and (min-device-width:1024px) and (orientation:landscape)">

桌面电脑 1280*960像素

<link rel="stylesheet" href="lounge-pc.css" media="screen and (max-device-width:1280px)">

互联网电视2650*1600像素

<link rel="stylesheet" href="lounge-tv.css" media="screen and (max-device-width:2650px)">

程序员灯塔
转载请注明原文链接:css样式不止是浏览器
喜欢 (0)