css样式不止是浏览器

Posted 2021-06-08 tallish

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)">