怎样使用@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
【值得收藏】HTML5使用多种方法实现移动页面自适应手机屏幕的方法总结
随机智能手机,平板等智能移动设备的普及。移动端是我们目前接触最多的页面展示终端,不管是对于开发者还是其他普通的使用者都是普遍的存在,而且移动终端的使用比电脑更广泛,更频繁,特别是当微信平台等变成我们日常使用工具之后。所以对于开发者来说,不管任何开发任何界面都需要着重考虑页面对移动设备的兼容以及自适应。才能让用户体验性更好。
1841 0
|
7月前
|
编解码 前端开发 图形学
采用Canvas Scaler与锚点系统实现UI自适应多屏幕分辨率
【7月更文第10天】在游戏开发或应用设计中,确保用户界面(UI)能够在不同屏幕分辨率和纵横比上保持良好显示效果是一项基本要求。Unity 引擎通过其强大的 UI 系统,特别是 Canvas Scaler 和锚点系统,为开发者提供了实现这一目标的高效工具。本文将深入探讨如何结合使用这两个功能来创建自适应UI布局,以适配广泛的设备屏幕。
339 0
|
JavaScript 前端开发
javascript封装函数:解决win10缩放和布局推荐125%网页无法自适应的解决方案
javascript封装函数:解决win10缩放和布局推荐125%网页无法自适应的解决方案
207 0
|
JavaScript 前端开发
获取屏幕、窗口和网页尺寸, 用JavaScript
本教程介绍了如何使用JavaScript获取屏幕、窗口和网页的尺寸。通过对不同尺寸的定义和访问方法进行解释,帮助读者更好地理解各种尺寸的含义和用途。
438 0
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
177 0
|
Web App开发 前端开发
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
105 0
|
前端开发
前端性能优化实践之 SVG Flex 预加载 窗口加载(7)
前端性能优化实践之 SVG Flex 预加载 窗口加载(7)
239 0
|
前端开发
前端性能优化之企业项目SVG Flex 预加载 窗口加载(6)
前端性能优化之企业项目SVG Flex 预加载 窗口加载(6)
127 0
|
Web App开发 前端开发
《CSS3-布局》移动设备网页等比缩放布局
《CSS3-布局》移动设备网页等比缩放布局
1307 0
|
C# Windows
Silverlight & Blend动画设计系列十一:沿路径动画(Animation Along a Path)
原文:Silverlight & Blend动画设计系列十一:沿路径动画(Animation Along a Path)   Silverlight 提供一个好的动画基础,但缺少一种方便的方法沿任意几何路径对象进行动画处理。
949 0