济南教育论坛网站建设,page n wordpress,河南网站seo设计,品牌建设和品牌打造文章目录 概念媒体查询媒体类型媒体特性媒体运算符 概念 所谓对响应式布局方案的理解#xff0c;众说纷纭#xff0c;核心点就是同一套代码在不同尺度屏幕下的布局呈现方式的不同 社区中有很多人分享#xff0c;并列出了多种实现响应式布局的方案#xff0c;比如【 rem众说纷纭核心点就是同一套代码在不同尺度屏幕下的布局呈现方式的不同 社区中有很多人分享并列出了多种实现响应式布局的方案比如【 rem百分比%vw,vh】 以及最关键的 【媒体查询】等等。其实针对这些布局方案的理解绝大多数人还是存在一定的误区。从我个人严格意义上的理解中上述的方案 只有 媒体查询 才是真正的响应式布局 而其他几种方案比如【 rem百分比%vwvh】准确点说应该是属于 自适应布局的概念范围内自适应布局 和响应式布局其实在本质上还是有区别的。简述的说就是 响应式布局 真正意义上做到了 一套代码资源在不同尺度屏幕下的布局呈现方式的不同 而自适应布局会根据用户使用的设备屏幕尺寸不同呈现出不同方式的展示效果主要是控制页面显示的比例并不会在同一套代码中去动态切换布局方式。同时这需要开发人员 提前针对不同平台开发出多套同业务但不同布局的代码然后动态判断用户的使用设备环境从而决定呈现相应的页面。 讲述了 响应式布局 的概念理解那么接下来就来聊聊 响应式布局的最佳解决方案 【媒体查询】 媒体查询
媒体类型
类型描述all检测所有设备。screen检测电子屏幕包括电脑屏幕、平板屏幕、手机屏幕等。【最常用】print检测打印机
媒体特性
类型描述width检测视口宽度max-width检测视口最大宽度min-width检测视口最小宽度height检测视口高度max-height 检测视口最大高度min-height 检测视口最小高度device-width 检测设备屏幕的宽度max-device-width 检测设备屏幕的最大宽度min-device-width 检测设备屏幕的最小宽度orientation 检测视口的旋转方向是否横屏portrait 视口处于纵向即高度大于等于宽度landscape 视口处于横向即宽度大于高度
媒体运算符
类型含义and并且, 或 or或not否定only肯定
实际开发中将会对不同尺寸屏幕做一个划分
使用代码示例
media screen and (max-width:768px) {
/*CSS-Code;*/
}
media screen and (min-width:768px) and (max-width:1200px) {
/*CSS-Code;*/
}由于涉及到多套样式相互切换如果写在一起就会特别的冗余所以做响应式布局我们一般 使用媒体查询搭配外部样式表一起使用。
例如
link relstylesheet media具体的媒体查询 hrefmystylesheet.css♂️ 博主座右铭向阳而生我还在路上 —————————————————————————————— 博主想说将持续性为社区输出自己的资源同时也见证自己的进步 —————————————————————————————— ♂️ 如果都看到这了博主希望留下你的足迹【收藏点赞✍️评论】 ——————————————————————————————
