版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
掌握视口的概念及设置掌握媒体查询的用法视口的概念及设置视口的概念及设置视口的概念视口（viewport）在响应式布局中是一个非常重要的概念，它是用户在网页上的可见区域，随设备而异。作用：视口的出现，使得不管PC端网页尺寸有多大，都能将其缩小显示在移动端浏览器上。
视口的概念及设置视口的概念移动端浏览器中存在两种视口：一是可见视口，即设备大小；二是视窗视口，即网页宽度。视口的概念及设置视口的设置通过
<meta>
标签来控制视口，语法如下：<metaname="viewport"content="width=device-width,initial-scale=1.0，maximum-scale=1.0">媒体查询的用法媒体查询的用法媒体查询的定义媒体查询用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。由媒体类型和条件表达式组成，语法如下：@medianot|only媒体类型and（条件表达式）{
选择器{
属性名:属性值;}
}媒体查询的用法媒体查询的定义all：所有媒体类型设备
screen：计算机屏幕、平板电脑、智能手机等
print：打印预览
常用的媒体类型包括：媒体查询的用法媒体查询的定义<style>@mediascreenand(max-width:960px){
选择器{
属性名:属性值;}}</style>示例语法代码：媒体查询的用法媒体查询的定义<linkrel="stylesheet"media="媒体类型and|not|only(条件)"href="样式表文件.css">还可以针对不同的媒体使用不同的样式表，语法如下：媒体查询的用法设备划分尺寸区间宽度设置超小屏幕（手机）≤575px100%小屏幕（平板）≥576px540px中等屏幕（桌面显示器）≥768px720px大屏幕（大桌面显示器）≥992px960px超大屏幕（超大桌面显示器）≥1200px1140px响应式布局容器的划分媒体查询的用法使用媒体查询实现元素排列运行结果媒体查询的用法注意：调整浏览器窗口看网页元素排列顺序使用媒体查询
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 高中语文+《烛之武退秦师》《鸿门宴》对比阅读课件+统编版高一语文必修下册
- 快递公司岗位责任制度
- 意识形态两个责任制度
- 房地产责任制度
- 托运人法律责任制度
- 扶贫办信访责任制度
- 技术负责责任制度
- 拆违包保责任制度
- 换届风气监督责任制度
- 推行门前五包责任制度
- 伤口负压治疗新进展
- HIV感染者心理支持方案
- 配电箱设备防护维护技术方案
- 2026年苏州工业职业技术学院单招综合素质考试题库附答案
- 2025版《煤矿安全规程》解读
- 2026年安徽水利水电职业技术学院单招职业适应性考试题库及答案1套
- 采集动脉血课件
- 2025年江西省公务员考试行测真题解析试卷（含答案）
- 剧毒从业证摸拟考试及答案解析
- 西藏高标准农田施工方案
- 隧道施工环境监测方案
评论
0/150
提交评论