响应式网站布局(一)之媒体查询
时间:2019-02-18
本文章向大家介绍响应式网站布局(一)之媒体查询,主要包括响应式网站布局(一)之媒体查询使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
媒体查询 @media
1. 设置 Meta 标签(适用于移动端)
大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>
标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2. 通过媒介查询来设置不同屏幕大小的样式
@media screen and (max-width: 980px) and (min-width:720px) {
#head { … }
#content { … }
#footer { … }
}
3.宽度尽量用百分比
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//at.alicdn.com/t/font_1047897_spi0hu5hwk.css" rel="stylesheet">
<style>
@media only screen and (max-width: 800px) {
.item .name{
display: none;
}
}
.content{
display: flex;
justify-items: center;
}
.content .item{
display: flex;
justify-content: center;
width: 100px;
height: 40px;
line-height: 40px;
margin-left: 5px;
font-size: 16px;
color: #fff;
background: #1f9bb1;
}
.content i{
font-size: 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="item"><i class="iconfont icon-filedone"></i><span class="name">1</span></div>
<div class="item"><i class="iconfont icon--"></i><span class="name">2</span></div>
<div class="item"><i class="iconfont icon-feiji"></i><span class="name">3</span></div>
<div class="item"><i class="iconfont icon-user"></i><span class="name">4</span></div>
</div>
</body>
</html>
以上采用媒体查询和flex布局实现一个最大宽度为800的响应式简单例子
更多媒体查询的api参考这里:http://www.runoob.com/cssref/css3-pr-mediaquery.html
- 轻松初探 Python 篇(五)—dict 和 set 知识汇总
- 全面解析C#中的异步编程为什么要异步过去糟糕的体验一个新的方式Tasks基于任务的异步编程模型Async和await时间处理程序和无返回值的异步方法结束语
- CSS深入理解学习笔记之absolute
- 5个经典的JavaScript面试题
- 轻松初探 Python 篇(四)—list tuple range 知识汇总
- CSS深入理解学习笔记之overflow
- Python爬虫实践——简单爬取我的博客
- Python爬虫入门(二)
- 在ASP.NET MVC5应用程序中快速接入QQ和新浪微博OAuth起步创建应用程序使用NUGET更新OWIN中间件启动SSL支持申请腾讯QQ的Oauth申请新浪微博的Oauth快速接入资源地址&源码
- 有趣的算法(六) ——Find-Union算法
- 有趣的算法(七) ——快速排序改进算法
- 编写你人生中第一个机器学习代码吧!
- 使用Octave来学习Machine Learning(二)
- RESTful API的十个最佳实践1. 使用名词而不是动词 2. Get方法和查询参数不应该改变资源状态3. 使用名词的复数形式 4. 为关系使用子资源 5. 使用HTTP头决定序列化格式 6. 使
- 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 实例
- C++入门指南及实战 第二步 HelloWorld及扩展详解
- 依托于GitLab持续集成基础配置和使用
- C++入门指南及实战 第三步 基本变量
- 最全总结 | 聊聊 Python 数据处理全家桶(配置篇)
- FlexSDK工具包的介绍与编译使用
- 《零基础看得懂的C语言入门教程 》——(二)C语言没那么难简单开发带你了解流程
- Ansible自动化运维学习笔记5
- Ansible自动化运维学习笔记4
- 《零基础看得懂的C语言入门教程 》——(三)轻轻松松理解第一个C语言程序
- Python自动化运维2
- AirTest 基本使用及框架浅剖析——五分钟上手制作游戏辅助
- 【面试题】734- 从一道面试题谈谈对 EventLoop 的理解
- (上)python3 selenium3 从框架实现代码学习selenium让你事半功倍
- (下)python3 selenium3 从框架实现代码学习selenium让你事半功倍
- 【Vuejs】738- 一篇文章上手Vue3中新增的API