响应式布局@media screen and ( max-width: 像素值 ) {}
时间:2021-09-16
本文章向大家介绍响应式布局@media screen and ( max-width: 像素值 ) {},主要包括响应式布局@media screen and ( max-width: 像素值 ) {}使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024px的时候,则通过Media Query预设的样式表来将页面的宽度设置为百分比显示,这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理,当浏览器的可视区域改变到某个值(假如为650px)的时候,页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子:
/*在CSS里添加如下示例代码*/ /* 当浏览器的可视区域小于980px */ @media screen and ( max-width: 980px ) { #wrap {width: 90%; margin:0 auto;} #content {width: 60%;padding: 5%;} #sidebar {width: 30%;} #footer {padding: 8% 5%;margin-bottom: 10px;} } /* 当浏览器的可视区域小于650px */ @media screen and ( max-width: 650px ) { #header {height: auto;} #searchform {position: absolute;top: 5px;right: 0;} #content {width: auto; float: none; margin: 20px 0;} #sidebar {width: 100%; float: none; margin: 0;} } /*显示的表格部份也可以这样定义*/ table{margin:0 auto;font-size:12px;width:98%;} table{border-left:1px solid #a2c6d3;border-top:3px solid #0180CF;} table td{border-right:1px solid #a2c6d3;border-bottom:1px solid #a2c6d3;} table td{padding:2px 4px;word-wrap:break-word;word-break:break-all;min-width:88px;} .tt{background:#e5f2fa;line-height:18px;font-weight:bold;FONT-SIZE:12px;max-width:596px;} table.ss{border:1px solid #000;border-spacing:inherit;border-collapse:collapse;} .ss td{border:1px solid #000;border-spacing:inherit;border-collapse:collapse;} /* 当浏览器的可视区域小于650px */ @media screen and (max-width: 650px) { table{border:0;border-top:0px solid #0180CF;} table thead {display:none;} table tr{margin-bottom:18px;display:block;border-top:2px solid #0180CF;} table tr{border-bottom:1px solid #0180CF;} table td {display:block;text-align:left;font-size:12px;} table td {border-left:1px dotted #0180CF;border-bottom: 1px dotted #ccc;} table td:last-child {border-bottom:0;} table td:before {content:attr(data-label);float:left;text-transform:uppercase;} table td:before {font-weight:bold;color:red;margin:0px 6px;} }
原文地址:https://www.cnblogs.com/appinz/p/15292778.html
- thinkphp生成的验证码不显示问题解决
- 深入剖析Spring(二)——IoC容器的实现
- JDBC上关于数据库中多表操作一对多关系和多对多关系的实现方法
- 深入剖析Spring(一)——IoC的基本概念(从面向对象角度介绍)
- Restful安全认证及权限的解决方案
- Java并发容器大合集
- Java并发编程的艺术(九)——批量获取多条线程的执行结果
- web.xml中load-on-startup的作用
- Java并发编程的艺术(七)——Executors
- Java并发编程的艺术(八)——闭锁、同步屏障、信号量详解
- PowerDesigner使用教程|使用方法
- Java并发编程的艺术(一)——并发编程需要注意的问题
- 梯度下降法快速教程 | 第三章:学习率衰减因子(decay)的原理与Python实现
- Java并发编程的艺术(三)——volatile
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Celery 分布式框架 学习
- .NET Core + K8S + Loki 玩转日志聚合
- varint是啥你真的知道么?
- 一篇文章带你入门移动安全
- Could not load JDBC driver class [com.mysql.jdbc.Driver]
- [Bazel]自定义规则实现将多个静态库合并为一个动态库或静态库
- [Golang]包管理
- Power Query中避免出错的几种情况
- 我的开发日记(十五)
- 常见未授权访问漏洞总结
- 如何用命令行给mySQL添加用户
- [877]ModuleNotFoundError:no module named ‘tools.nnwrap‘ 解决办法
- Selenium自动化:代码测试与无代码测试
- 个人独立博客搭建教程(win),如何快速搭建博客
- dotnet OpenXML 解压缩文档为文件夹工具