Css3媒体查询使用

http://my.oschina.net/u/2352644/blog/616042
css3媒体查询技术的出现，在多设备支持上为我们提供了解决方案。

媒体查询的使用方法：

Html代码

@media screen and (max-width: 480px) {

.col-xs-1{width: 8.333333333333332%; float:left;}

.col-xs-2{ width: 16.666666666666664%; float:left;}

.col-xs-3{ width: 25%; float:left;}

}

在设备窗口宽度小于480时，下面的样式会被采用，不满足这个查询设置，下面定义的css是无效的，html根本就不会识别到。

简单理解就是，如果当前宽度是1000，那么就是div上有类名.col-xs-1，div还是只是简单块元素（不会浮动和宽为百分比），查询的设置是不起作用的。

充分利用媒体查询，实现多设备支持的框架当前最热门就是bootstrap了，我们可以学习和使用它进行开发。

下面是我自己利用媒体查询写的实例页面，都是常用css布局方式配合了媒体查询，多的就不做解释了，一句话就是写法都是css里面，看看就能懂：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

Html代码

<!DOCTYPE html>

<html>

<head>

<title>media/媒体查询/简易UI</title>

<style>

/*========================全局样式============================*/

*{ margin:0; padding:0;}

html{height:100%;}

body{height:100%; font-size:16px; font-family:"微软雅黑";}

a{ text-decoration:none;}

img{ border:none;}

ul{ list-style:none;}

/*========================预定义样式==========================*/

/*通用*/

.left{float:left;}

.right{float:right;}

.clear{clear:both;}

.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}

.clearfix{ zoom:1;}

/*12列布局*/

.row:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}

@media screen and (max-width: 480px) {

.col-xs-1{width: 8.333333333333332%; float:left;}

.col-xs-2{ width: 16.666666666666664%; float:left;}

.col-xs-3{ width: 25%; float:left;}

.col-xs-4{ width: 33.33333333333333%; float:left;}

.col-xs-5{width: 41.66666666666667%; float:left;}

.col-xs-6{width: 50%; float:left;}

.col-xs-7{ width: 58.333333333333336%; float:left;}

.col-xs-8{width: 66.66666666666666%; float:left;}

.col-xs-9{width: 75%; float:left;}

.col-xs-10{width: 83.33333333333334%; float:left;}

.col-xs-11{ width: 91.66666666666666%; float:left;}

.col-xs-12{ width:100%; float:left;}

.col-xs-mar-1{ margin-left: 8.333333333333332%; margin-right: 8.333333333333332%;}

.col-xs-mar-2{ margin-left:16.666666666666664%; margin-right:16.666666666666664%;}

.col-xs-mar-3{margin-left:25%; margin-right:25%;}

.col-xs-mar-4{margin-left:33.33333333333333%; margin-right:33.33333333333333%;}

.col-xs-mar-5{margin-left:41.66666666666667%; margin-right:41.66666666666667%;}

.col-xs-mar-6{margin-left:50%; margin-right:50%;}

.col-xs-mar-7{ margin-left:58.333333333333336%; margin-right:58.333333333333336%;}

.col-xs-mar-8{ margin-left:66.66666666666666%; margin-right:66.66666666666666%;}

.col-xs-mar-9{margin-left:75%; margin-right:75%;}

.col-xs-mar-10{margin-left:83.33333333333334%; margin-right:83.33333333333334%;}

.col-xs-mar-11{margin-left:91.66666666666666%; margin-right:91.66666666666666%;}

}

@media screen and (min-width: 481px) and (max-width: 768px) {

.col-sm-1{ width: 8.333333333333332%; float:left;}

.col-sm-2{ width:16.666666666666664%; float:left;}

.col-sm-3{ width:25%; float:left;}

.col-sm-4{ width:33.33333333333333%; float:left;}

.col-sm-5{ width:41.66666666666667%; float:left;}

.col-sm-6{ width:50%; float:left;}

.col-sm-7{ width:58.333333333333336%; float:left;}

.col-sm-8{ width:66.66666666666666%; float:left;}

.col-sm-9{ width:75%; float:left;}

.col-sm-10{ width:83.33333333333334%; float:left;}

.col-sm-11{ width:91.66666666666666%; float:left;}

.col-sm-12{ width:100%; float:left;}

.col-sm-mar-1{ margin-left: 8.333333333333332%; margin-right: 8.333333333333332%;}

.col-sm-mar-2{ margin-left:16.666666666666664%; margin-right:16.666666666666664%;}

.col-sm-mar-3{margin-left:25%; margin-right:25%;}

.col-sm-mar-4{margin-left:33.33333333333333%; margin-right:33.33333333333333%;}

.col-sm-mar-5{margin-left:41.66666666666667%; margin-right:41.66666666666667%;}

.col-sm-mar-6{margin-left:50%; margin-right:50%;}

.col-sm-mar-7{margin-left:58.333333333333336%; margin-right:58.333333333333336%;}

.col-sm-mar-8{margin-left:66.66666666666666%; margin-right:66.66666666666666%;}

.col-sm-mar-9{margin-left:75%; margin-right:75%;}

.col-sm-mar-10{margin-left:83.33333333333334%; margin-right:83.33333333333334%;}

.col-sm-mar-11{margin-left:91.66666666666666%; margin-right:91.66666666666666%;}

}

@media screen and (min-width: 769px) and (max-width: 992px) {

.col-md-1{ width: 8.333333333333332%; float:left;}

.col-md-2{ width:16.666666666666664%; float:left;}

.col-md-3{ width:25%; float:left;}

.col-md-4{ width:33.33333333333333%; float:left;}

.col-md-5{ width:41.66666666666667%; float:left;}

.col-md-6{ width:50%; float:left;}

.col-md-7{ width:58.333333333333336%; float:left;}

.col-md-8{ width:66.66666666666666%; float:left;}

.col-md-9{ width:75%; float:left;}

.col-md-10{ width:83.33333333333334%; float:left;}

.col-md-11{ width:91.66666666666666%; float:left;}

.col-md-12{ width:100%; float:left;}

.col-md-mar-1{ margin-left: 8.333333333333332%; margin-right: 8.333333333333332%;}

.col-md-mar-2{ margin-left:16.666666666666664%; margin-right:16.666666666666664%;}

.col-md-mar-3{margin-left:25%; margin-right:25%;}

.col-md-mar-4{margin-left:33.33333333333333%; margin-right:33.33333333333333%;}

.col-md-mar-5{margin-left:41.66666666666667%; margin-right:41.66666666666667%;}

.col-md-mar-6{margin-left:50%; margin-right:50%;}

.col-md-mar-7{margin-left:58.333333333333336%; margin-right:58.333333333333336%;}

.col-md-mar-8{margin-left:66.66666666666666%; margin-right:66.66666666666666%;}

.col-md-mar-9{margin-left:75%; margin-right:75%;}

.col-md-mar-10{margin-left:83.33333333333334%; margin-right:83.33333333333334%;}

.col-md-mar-11{margin-left:91.66666666666666%; margin-right:91.66666666666666%;}

}

@media screen and (min-width: 993px) and (max-width: 1200px) {

.container{ width:900px; margin:0 auto;}

.col-lg-1{ width: 8.333333333333332%; float:left;}

.col-lg-2{ width:16.666666666666664%; float:left;}

.col-lg-3{ width:25%; float:left;}

.col-lg-4{ width:33.33333333333333%; float:left;}

.col-lg-5{ width:41.66666666666667%; float:left;}

.col-lg-6{ width:50%; float:left;}

.col-lg-7{ width:58.333333333333336%; float:left;}

.col-lg-8{ width:66.66666666666666%; float:left;}

.col-lg-9{ width:75%; float:left;}

.col-lg-10{ width:83.33333333333334%; float:left;}

.col-lg-11{ width:91.66666666666666%; float:left;}

.col-lg-12{ width:100%; float:left;}

.col-lg-mar-1{ margin-left: 8.333333333333332%; margin-right: 8.333333333333332%;}

.col-lg-mar-2{ margin-left:16.666666666666664%; margin-right:16.666666666666664%;}

.col-lg-mar-3{margin-left:25%; margin-right:25%;}

.col-lg-mar-4{margin-left:33.33333333333333%; margin-right:33.33333333333333%;}

.col-lg-mar-5{margin-left:41.66666666666667%; margin-right:41.66666666666667%;}

.col-lg-mar-6{margin-left:50%; margin-right:50%;}

.col-lg-mar-7{margin-left:58.333333333333336%; margin-right:58.333333333333336%;}

.col-lg-mar-8{margin-left:66.66666666666666%; margin-right:66.66666666666666%;}

.col-lg-mar-9{margin-left:75%; margin-right:75%;}

.col-lg-mar-10{margin-left:83.33333333333334%; margin-right:83.33333333333334%;}

.col-lg-mar-11{margin-left:91.66666666666666%; margin-right:91.66666666666666%;}

}

@media screen and (min-width: 1201px) {

.container{ width:1100px; margin:0 auto;}

.col-xs-max-1{ width: 8.333333333333332%; float:left;}

.col-xs-max-2{ width:16.666666666666664%; float:left;}

.col-xs-max-3{ width:25%; float:left;}

.col-xs-max-4{ width:33.33333333333333%; float:left;}

.col-xs-max-5{ width:41.66666666666667%; float:left;}

.col-xs-max-6{ width:50%; float:left;}

.col-xs-max-7{ width:58.333333333333336%; float:left;}

.col-xs-max-8{ width:66.66666666666666%; float:left;}

.col-xs-max-9{ width:75%; float:left;}

.col-xs-max-10{ width:83.33333333333334%; float:left;}

.col-xs-max-11{ width:91.66666666666666%; float:left;}

.col-xs-max-12{ width:100%; float:left;}

.col-xs-max-mar-1{ margin-left: 8.333333333333332%; margin-right: 8.333333333333332%;}

.col-xs-max-mar-2{ margin-left:16.666666666666664%; margin-right:16.666666666666664%;}

.col-xs-max-mar-3{margin-left:25%; margin-right:25%;}

.col-xs-max-mar-4{margin-left:33.33333333333333%; margin-right:33.33333333333333%;}

.col-xs-max-mar-5{margin-left:41.66666666666667%; margin-right:41.66666666666667%;}

.col-xs-max-mar-6{margin-left:50%; margin-right:50%;}

.col-xs-max-mar-7{margin-left:58.333333333333336%; margin-right:58.333333333333336%;}

.col-xs-max-mar-8{margin-left:66.66666666666666%; margin-right:66.66666666666666%;}

.col-xs-max-mar-9{margin-left:75%; margin-right:75%;}

.col-xs-max-mar-10{margin-left:83.33333333333334%; margin-right:83.33333333333334%;}

.col-xs-max-mar-11{margin-left:91.66666666666666%; margin-right:91.66666666666666%;}

}

/*ui细化*/

.width-10{ width:10px;}

.width-50{ width:50px;}

.width-100{ width:100px;}

.width-150{ width:150px;}

.width-200{ width:200px;}

.border-normal{ background:#999; border:none; margin:10px 10%; display:block; border-radius:10px; height:50px; line-height:40px; color:#fff; text-align:center; width:80%; font-size:18px; cursor:pointer;}

.border-success{background:#0C6;border:none;margin:10px 10%;display:block; border-radius:10px;height:50px; line-height:40px; color:#fff; text-align:center;width:80%; font-size:18px; cursor:pointer;}

.border-err{background:#F33;border:none;margin:10px 10%;display:block; border-radius:10px;height:50px; line-height:40px; color:#fff; text-align:center;width:80%; font-size:18px; cursor:pointer;}

.table-normal{ width:100%; margin:10px 0px; border-collapse:collapse;}

.table-normal td{ border:1px solid #999; padding:5px;}

.table-radius{ width:100%; margin:10px 0px; border-spacing:0px;border-right:1px solid #999;border-bottom:1px solid #999;border-radius:10px;}

.table-radius td{ border-top:1px solid #999;border-left:1px solid #999; padding:5px;}

.table-radius tr td:last-child{}

.table-radius tr:last-child td{}

.table-radius tr:first-child td:first-child{border-radius:10px 0 0 0;}

.table-radius tr:first-child td:last-child{border-radius:0 10px 0 0;}

.table-radius tr:last-child td:first-child{border-radius:0 0 0 10px;}

/*=========================自定义样式===========================*/

#size{ height:50px; line-height:50px; text-align:center; font-weight:bold; font-size:20px; margin:50px; border-bottom:5px solid #09F;}

.col{ margin:20px 0; background:#0CF; box-sizing:border-box; border:2px solid #993;}

.col2{background:#C30; box-sizing:border-box; border:2px solid #0CF;height:50px;}

</style>

</head>

<body>

<div id="size">测试窗口大小当前为<span id="sizeval">0</span>px</div>

</div>

</div>

</div>

</table>

</table>

</div>

</body>

var size=document.getElementById("size");

var sizeval=document.getElementById("sizeval");

sizeval.innerHTML=document.documentElement.offsetWidth;

window.onresize=function(){

sizeval.innerHTML=document.documentElement.offsetWidth;

};

</script>

</html>

流式布局，百分比赋值，多预设设置结合媒体查询。

不静之心

Css3媒体查询使用

发表评论取消回复

访问信息

功能

近期评论

不静之心

Css3媒体查询使用

发表评论 取消回复

访问信息

功能

近期评论

发表评论取消回复