慕课网

Wendy_22

3.多个媒体特性使用 Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。 @media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} } 4.设备屏幕的输出宽度Device Width 在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> 上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。 5. not关键词使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如： @media not print and (max-width: 1200px){样式代码} 上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

查看全部

0 采集收起来源：Media Queries使用方法

2018-03-22

Wendy_22

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。 @media 媒体类型and （媒体特性）{你的样式} 注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如： (max-width: 480px) 从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。 1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如： @media screen and (max-width:480px){ .ads { display:none; } } 上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。 2.最小宽度min-width “min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。 @media screen and (min-width:900px){ .wrapper{width: 980px;} } 上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

查看全部

0 采集收起来源：Media Queries使用方法

2018-03-22

Wendy_22

在实际中媒体类型有近十种之多，实际之中常用的也就那么几种，不过媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种： link方法 link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> @import方法 @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。 @importurl(reset.css) screen; @importurl(print.css) print; 在<head>中的<style>标签中引入媒体类型方法。 <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media方法 @media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。（1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} } （2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>

查看全部

0 采集收起来源：media queries——媒体类型（二）

2018-03-22

Wendy_22

一、媒体类型媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示：值设备类型 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种投影设备 Screen 电脑显示器 Speech 语音或音频合成器 Tv 电视机类型设备 Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端其中Screen、All和Print为最常见的三种媒体类型。

查看全部

0 采集收起来源：Media Queries——媒体类型（一）

2015-07-31

Wendy_22

8.Flex项目实现自动伸缩您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 .bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）

2015-07-31

Wendy_22

6.Flex项目移动右边 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; } 7.水平垂直居中在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）

2015-07-31

Wendy_22

5.Flex项目移到左边 flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）

2015-07-31

Wendy_22

3.Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。 .flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（一）

2015-07-31

Wendy_22

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；第五，可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。 Flexbox规范版本众多，浏览器对此语法支持度也各有不同，接下来的内容以最新语法版本为例向大家展示：1.创建一个flex容器任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit， .flexcontainer{ display: -webkit-flex; display: flex; }2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）

2015-07-31

Wendy_22

CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响

查看全部

0 采集收起来源：CSS3 盒子模型

2015-07-31

Wendy_22

column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all 取值说明属性值属性值说明 none 此值为column-span的默认值，表示不跨越任何列。 all 这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。例如：将第一个标题跨越所有列，代码： column-span:all;

查看全部

0 采集收起来源：CSS3 跨列设置column-span

2015-07-31

Wendy_22

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则： column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 取值说明：属性值属性值说明 column-rule-width 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin column-rule-style 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色) 例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为： column-rule: 2px dotted green;

查看全部

0 采集收起来源：CSS3 列表边框column-rule

2018-03-22

Wendy_22

column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 取值说明属性值属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。

查看全部

0 采集收起来源：CSS3 列间距column-gap

2018-03-22

Wendy_22

column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | <integer> 取值说明：属性值属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。

查看全部

0 采集收起来源：CSS3 多列布局——column-count

2018-03-22

Wendy_22

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示； column-width: auto | <length> 取值说明属性值说明 auto 如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 <length> 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。

查看全部

0 采集收起来源：CSS3 多列布局——column-width

2018-03-22

十天精通CSS3