跨境电商博客

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]

赞 (0) 打赏

评论 2

  1. 肖振杰博客测试过,还没有真正上线。回复
    • 梁国钊试试看 最近我也在研究这个!回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏