本篇文章给大家谈谈html媒体查询布局，以及css3媒体查询的用法对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
7、响应式布局（媒体查询）
1、纯PC端布局：
（1）通常以固定宽度布局，常见的宽度范围 950 - 1200
以width设置固定宽度，并居中。
（2）流式布局，宽度设置百分比配合max-width 、 min-width
以width设置百分比宽度来快速实现宽度自适应
2、纯移动端布局：
（1）rem / em，将宽和高从固定px到相对rem，实现屏幕自适应等比变化
（2）弹性盒子
（3）怪异盒模型
现如今大多数网站都存在PC和移动的双端显示，PC和移动会切换显示
需要检测屏幕宽度的变化，在不同宽度渲染不同的布局和样式。
（1）媒体查询，根据给出的媒体类型为条件，来检测设备宽度的变化
常见媒体类型：
1. screen，屏幕
常见的设计规范下的屏幕尺寸范围
（1）width 768px 超小屏幕，手机屏幕
（2）width 992px 小屏幕，平板（ipad）
（3）width 1200px 大屏幕，桌面屏幕
（4）width ≥ 1200px 超大屏幕，大型的桌面屏幕
例如：壁纸网页
1. 在PC设备上，一行可显示4张壁纸
2. 在移动设备上
（1）ipad上，一行显示2张壁纸
（2）手机上，一行显示1张壁纸
（2）js的resize事件动态监听window窗口尺寸变化
1、媒体查询：实现在不同设备宽度下渲染不同布局和样式
2、媒体查询的语法:
（1）media：表示媒体
（2）screen：表示媒体类型设置为屏幕类型
（3）and：连接媒体类型和查询条件，左右两侧必须有空格
（4）width：规定固定的屏幕宽度
（5）min-width：规定屏幕的最小宽度，当屏幕宽度大于min-width时
（6）max-width：规定屏幕的最大宽度，当屏幕宽度小于max-width时
1、引入方式：
（1）通过link标签的media属性来规定媒体类型和查询条件，在条件符合的情况下引入对应的外联css文件
（2） 通过为style设置媒体类型及查询条件，来渲染不同条件下的不同style标签内的样式
设置方式与link标签的media相同
（3）在style标签中，声明媒体类型及查询条件，当条件符合时样式会覆盖默认样式
语法：
@media 媒体类型 and 查询条件 {
选择器{
符合查询条件的样式
}
}
注意：媒体查询一定要写在默认样式之后。
html布局的几种方式有
1、HTML布局主要有两种方式，一种是表格布局，一种是DIV布局。
2、HTML表格布局是WEB1.0时代主要使用的布局方式，即使用TABLE标签进行布局，优点是布局比较简单。
3、HTML DIV布局是WEB2.0时代主要使用的布局方式，优点是符合W3C标准，载入速度比较快，也比较便于做结构分离。
4、现在一般都是提倡使用DIV布局，但也不是说就淘汰表格布局了，视具体的场景需要，在很多场景中都是两种混合使用的。
5、希望对你有帮助。
html元素的布局？
利用HTML进行布局的方法有：1、通过“table”标签来对表格的行和列进行排列来实现页面布局的效果；2、将网页内容放在多个页面中的多列布局；3、使用div和span标签进行布局。
页面布局：
标题：前端的一部分，用于页面顶部。header标签用于在网页中添加标题部分。
导航栏：导航栏与菜单列表相同。它用于使用超链接显示内容信息。
索引/侧边栏：它包含其他信息或广告，并不总是需要添加到页面中。
内容部分：内容部分是显示内容的主要部分。
页脚：页脚部分包含联系信息和与网页相关的其他查询。页脚部分始终放在网页的底部。footer标签用于设置网页中的页脚。
HTML里面有几种布局方式？
1.自然布局。
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
关于html媒体查询布局和css3媒体查询的用法的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
温馨提示
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请后台提交工单处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请后台提交工单！
【免责声明】：
本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
【关于转载】：
本站尊重互联网版权体系，本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读，无任何商业用途，所有内容版权归原作者所有
如本站（文章、内容、图片、视频）任何资料有侵权，先说声抱歉；麻烦您请联系请后台提交工单，我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
注：本站资源来自网络转载，版权归原作者和公司所有，如果有侵犯到您的权益，请第一时间联系我们处理！
-----------------------------------------------------------------------------------------------------------
【版权声明】：
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
三、如有内容侵犯您的版权或其他利益的，请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后，情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » html媒体查询布局（css3媒体查询的用法）
1 评论