- 简介：本文主要提供一些开发响应式网站的方式方法，希望对你有所帮助
一，使用媒体查询 @media
媒体查询可以根据不同的设备尺寸来加载不同的css样式，这样你就可以在一套html结构中开发出适应pc端和移动端的网站
@media的基本使用
<head>
<style>
/* 公共样式 */
#box1 {
width: 150px;
height: 150px;
border: 1px solid #eee;
}
/* 在 100px - 199px 设备屏幕宽度下加载,并覆盖调默认样式 */
@media screen and (min-device-width: 100px) and (max-device-width: 199px) {
#box1 {
background-color: green;
}
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
媒体查询的常用单位
| 属性名称 | 作用 |
|---|---|
| width, height | 浏览器可 |
最低0.47元/天 解锁文章
1338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
