css3 -- 媒体查询

响应式网页(responsive web design )

根据用户的窗口大小,调整网页的布局。让大屏幕用户有大的版式设计,不至于浪费显示空间。

国外响应式网站: https://mediaqueri.es/ 
css3 中link 标签中增加了media属性,表示使用这个样式表的条件是什么,叫**媒体查询** 
例如:

 <link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index1200.css">
<link rel="stylesheet" type="text/css" href="css/index980.css" media = "screen and (min-width:980px) and (max-width:1199px)">
<link rel="stylesheet" type="text/css" href="css/index768.css" media = "screen and (min-width:768px) and (max-width:979px)">
<link rel="stylesheet" type="text/css" href="css/index767.css" media = "screen and (max-width:767px)">

响应式网站设计demo: https://cyanar.github.io/responsive-web-design/index.html

posted @ 2017-06-14 22:35  circe  阅读(...)  评论(...编辑  收藏