css响应式布局原理

发布时间：2023-09-06 01:50责任编辑：白小东关键词：暂无标签

移动设备优先：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

媒体标签：

@media screen and (min-width: 100px){ ???div{ ???????width: 100px; ???????height: 1000px; ???????background: yellow; ???}}

完整代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><style>@media screen and (min-width: 100px){ ???div{ ???????width: 100px; ???????height: 1000px; ???????background: yellow; ???}}@media screen and (min-width: 500px){ ???div{ ???????width: 500px; ???????height: 1000px; ???????background: blue; ???}}@media screen and (min-width: 800px){ ???div{ ???????width: 800px; ???????height: 1000px; ???????background: black; ???}}</style></head><body><div></div></body></html>

效果：

css响应式布局原理

原文地址：http://blog.51cto.com/12173069/2106387

css响应式布局原理

知识推荐