CSS3-Media Query响应式布局学习

今天心血来潮的打开慕课网,学习CSS3-Media Query响应式布局,因为发现现在移动端流量很不错,工作上也接触了移动端优化等,学习这个很有必要,做了些笔记。

@·CSS3 Media Query常见属性
·devic-width,device-height——屏幕宽高
·width,height——渲染窗口宽高
·orientation——设备方向(横竖)
·resolutions——设备分辨率(注意区别像素PX和分辨率DPI的概念区别)

外联样式写法
[html]
<head>
<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)"/>
</head>
[/html]
内嵌样式写法
[html]
<head>
<style>
@media screen and (min-width: 480px){
body {background:blue;}
}
</style>
</head>
[/html]

2 comments

发表回复

您的电子邮箱地址不会被公开。