怎样使用@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%网页无法自适应的解决方案
186 0
|
JavaScript 前端开发
获取屏幕、窗口和网页尺寸, 用JavaScript
本教程介绍了如何使用JavaScript获取屏幕、窗口和网页的尺寸。通过对不同尺寸的定义和访问方法进行解释,帮助读者更好地理解各种尺寸的含义和用途。
382 0
|
Web App开发 前端开发
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
425 0
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
|
Web App开发 前端开发
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
媒体查询 隐藏效果 案例
媒体查询 隐藏效果 案例
99 0
媒体查询 隐藏效果 案例
|
前端开发
前端性能优化实践之 SVG Flex 预加载 窗口加载(7)
前端性能优化实践之 SVG Flex 预加载 窗口加载(7)
206 0
|
前端开发 容器
CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
349 0
CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
|
Web App开发 前端开发 程序员
好程序员web前端教程分享3种方法实现CSS隐藏滚动条并可以滚动内容
好程序员web前端教程分享3种方法实现CSS隐藏滚动条并可以滚动内容,隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。
1616 0
|
Web App开发 前端开发
《CSS3-布局》移动设备网页等比缩放布局
《CSS3-布局》移动设备网页等比缩放布局
1282 0
用rem编写移动端自适应网页
rem与px 的换算 计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem; 举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2...
992 0