怎样使用@media 媒体查询自适应网页窗口

简介: 怎样使用@media 媒体查询自适应网页窗口

“媒体类型(判断条件)+ CSS(符合条件的样式规则)”

<style>
    @media  媒体类型  and  (媒体特性){ 
            CSS样式 
    }
</style>
<-- 例子:最大500px 下 背景yellow -->
<style>
  @media screen and (max-width:500px) {
            body{
                background-color: yellow;
            }
        }
 </style>

引入方式:

@media方式:

@media 媒体类型 {

       选择器{ /*样式代码写在这里…*/}

}

link方法:  

<link  rel="stylesheet"  href="style.css"  media="媒体类型" />

目录
相关文章
|
JavaScript 前端开发
javascript封装函数:解决win10缩放和布局推荐125%网页无法自适应的解决方案
javascript封装函数:解决win10缩放和布局推荐125%网页无法自适应的解决方案
200 0
|
JavaScript 前端开发
获取屏幕、窗口和网页尺寸, 用JavaScript
本教程介绍了如何使用JavaScript获取屏幕、窗口和网页的尺寸。通过对不同尺寸的定义和访问方法进行解释,帮助读者更好地理解各种尺寸的含义和用途。
408 0
|
Web App开发 前端开发
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
446 0
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
|
Web App开发 前端开发
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
|
Web App开发 前端开发
chrome调试9-快速调试css数值及颜色图形动画
chrome调试9-快速调试css数值及颜色图形动画
404 0
chrome调试9-快速调试css数值及颜色图形动画
媒体查询 隐藏效果 案例
媒体查询 隐藏效果 案例
108 0
媒体查询 隐藏效果 案例
|
前端开发
前端性能优化实践之 SVG Flex 预加载 窗口加载(7)
前端性能优化实践之 SVG Flex 预加载 窗口加载(7)
216 0
用rem编写移动端自适应网页
rem与px 的换算 计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem; 举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2...
1005 4
|
Web App开发 前端开发
《CSS3-布局》移动设备网页等比缩放布局
《CSS3-布局》移动设备网页等比缩放布局
1294 0
页面自适应浏览器宽高
autodivheight(); function autodivheight() { //函数:获取尺寸 //获取浏览器窗口高度 var winHeight = 0; if (window.
1074 0