媒体查询--实现多终端

<link href="StyleSheet2.css" rel="stylesheet" media="screen and (min-width: 1000px)" /> <link href="StyleSheet3.css" rel="stylesheet" media="screen and (max-width: 600px)" />

上面的标记告诉浏览器,如果媒体查询中指定的媒体属性计算为true则使用StyleSheet2.css。在这种情况下,媒体查询检查请求设备可视面积是否大于1000 px。

第二行的标记指定如果可视面积小于600 px,则应用StyleSheet3.css。

时间： 2025-02-01 15:47:20

媒体查询--实现多终端的相关文章

html5 响应式布局（媒体查询）

响应式布局 响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的

CSS基础教程 -- 媒体查询屏幕适配

响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于".如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML

Media Queries ---- 媒体查询 @media

随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视.台式电脑.笔记本电脑.平板电脑和智能手机来 访问你的网站.尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样,但至少要让你的Web页面能适配用户的终端,让他更好的呈现在你的 用户面前.在本节中,将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺寸),从而让你的页面让用户有一个更好的体验. Media Queries Media Queries是CSS3新增加

媒体查询的简单应用

媒体查询如何适配不同设备? css3的新特性响应式布局,通过@media screen and (min-width: ) and (max-width: ) {}:来实现页面的响应式设计,来适应不同的终端.需在头部添加:<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">. 1.适应手机端: 例如

css3 媒体查询

最近一直没网,好不容易有网络了,大概了解了下,媒体查询的东西,css3的部分,下面是从网上查到的信息,一起看看吧. 其实我了解的媒体查询就是 :我们的网页能够让用户 在 不同尺寸的移动设备上面都有很好的用户体验, 作为CSS3规范的一部分,媒体查询扩展了media属性(控制您的样式应用方式)的角色.例如,多年来人们常常使用一种独立的样式表,通过指定media="print"来打印网页.媒体查询将这一理念提升到了更高层次,允许设计人员基于各种不同的设备属性(比如屏幕宽度.方向等)来确定目

CSS Media媒体查询

一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查询的内容 媒介类型 在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen         计算机屏幕(默认值)     tty            电传打字机以及使用等宽字符网格的类似媒介 tv 

CSS媒体查询：菜鸟笔记

CSS媒体查询 媒体查询包含了一个媒体类型和至少一个使用如高度.宽度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. 语法 媒体查询包含了一个媒体类型和如css3规范中描述的包含了一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假.如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真. <!--link元素中的css媒体查询--> <link rel="style

CSS3 media媒体查询器的使用方法

最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是media媒体查询器呢? Media媒体查询器是CSS3新增的一个可以检测打开网站的终端的屏幕分辨率的技术. Media媒体查询器的使用方法大致如下: 1.设置一个meta标签如:   1 <meta name="viewport" content="width=device-

media queries 媒体查询使用

media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" />根据符合的条件,调用相应的样式 2,在css中直接使用 媒体特性(判断条件)Media