媒体查询media的3种引入方式
生活随笔
收集整理的這篇文章主要介紹了
媒体查询media的3种引入方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
利用@media引入
在<style>...</style>標簽里使用@media來實現媒體查詢
<style>@media (min-device-width: 300px) and (max-device-width: 500px) {#box {width: 100px;height: 100px;background-color: cadetblue;}}@media (min-device-width: 501px) {#box {width: 100px;height: 100px;background-color: blueviolet;}}</style>style標簽上使用media
在<style>...</style>標簽上使用media=""
<style media="(min-device-width: 300px) and (max-device-width: 500px)">#box {width: 100px;height: 100px;background-color: cadetblue;}</style>link標簽上使用media
在<link>...</link>標簽上使用media=""
<head><linkrel="stylesheet" href="./style1.css"media="(min-device-width: 300px) and (max-device-width: 500px)"/><linkrel="stylesheet" href="./style2.css"media="(min-device-width: 501px)"/> </head>總結
以上是生活随笔為你收集整理的媒体查询media的3种引入方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 卖烟花爆竹的宣传文案30句
- 下一篇： PC菜单筛选器