响应式网站-媒体查询
1、什么是响应式网站
响应式是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面计算机显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现 。
2、响应式网站的核心逻辑
优雅降级，内容优先。
响应式：一个网站去兼容多个终端，而不是为每个终端做特定版本。
优点：
面对不同分辨率，设备灵活性比较高；
快捷解决很多设备的适应问题
适合中小型网站
缺点：
因为要兼容各种设备，工作量很大，效率不高
代码冗余，会出现很多隐藏无用的元素，加载时间长
原理：通过css3新增的媒体查询，定制某个宽度区间的网页布局。
具体表现在：
1、可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面
2、可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数
3、适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化
4、能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用
5、能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
6、能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断
1代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maxiumn-scale=1.0,miniumn- scale=1.0"><title>方式1</title><style>.container {width: 100%;/* height: 500px; */display: flex;background-color: lightblue;margin: 0 auto;overflow-y: auto;}.box0{width: 300px;height: 300px;background-color: #6fe7db;border: #b0c5c3 5px solid;margin: 10px auto;font-size: 20px;line-height: 300px;text-align: center;}@media screen and (max-width:768px) {/* 屏幕宽度小于等于768px时，粉色 */.container {flex-direction: column;justify-content: center ;}}@media screen and (min-width:768px) and (max-width:992px) {.container {/* 768px<=屏幕宽度<=992px时，lightblue *//* background-color: lightblue; */flex-direction: column-reverse;justify-content: center ;}}@media screen and (min-width:992px) and (max-width:1200px) {.container {/* 992px<=屏幕宽度<=1200px时，yellow *//* background-color: yellow; */flex-direction: row ;justify-content: space-between ;}}@media screen and (min-width:1200px){.container {/* 屏幕宽度>=1200px时，red *//* background-color: red; */flex-direction:row-reverse ;justify-content: space-around;}
}
</style>
</head>
<body><div class="container"><div class="box0">1</div><div class="box0">2</div><div class="box0">3</div><div class="box0">4</div></div>
</body>
</html>
3、媒体查询
能检测到设备屏幕的宽度，通过不同宽度的值，显示不同的样式
超小屏幕（移动设备）：768px以下；
小屏屏幕（平板设备）：768px-992px；
中屏屏幕（标屏设备）：992px-1200px；
大屏设备（宽屏设备）：1200px以上
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ... 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ... title: "CSS 0816" date: 2022-08-16T11:18:25+08:00 文章目录 title: "CSS 0816" date: 2 ... 1.CSS 来实现响应式 CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下: @media 类型 and (条件1) and (条件二){css样式} 我们只需用到widt ... 响应式网站设计 This video tutorial from Kevin Powell teaches you to build responsive websites from scratch. ... Adaptive website(自适应网站) 应对在浏览器的宽度变化不调整网页元素的位置,缩放网页元素,以适应在可用空间. Responsive website (响应式网站) ... 响应式网站设计 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局. 响应式网站的设计理念 响应式网站设计(Respo ... 一. 响应式布局: 响应式优缺点: 优点: 节省时间,减少工作量,每个设备都得到正确的设计,搜索优化... 缺点: 加载更多的样式和脚本资源,设计较难的的精确控制,老版本兼容性不好... 响应式网站 ... 一些废话(马克思主义乖巧) 上班快四个月了,码了一堆无聊的页面,终于,来了一次好玩点的,要我做个响应式网站.正好之前有在看Bootstrap.只是光学习不练的话效率比较慢(有跟着写demo).后来没看 ... 小菜鸡的第三篇博客 今天是3/19,天气不错,跑到自习室来更新博客. 本系列文章仅仅是对基础的HTML5以及CSS进行讲解,更加详细的内容均会附上链接,以便查阅和版权保护. 昨晚我思考了下,决定对 ...响应式网站-媒体查询相关推荐
最新文章
热门文章