为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第6天 响应式布局

标签:
Html5 CSS3

第一板块:六个案例学会响应式布局,第一章;第二章,大谷

第二板块:

  1. 什么是媒体查询(media)?(移动端使用较多)

    为不同尺寸的屏幕设定不同的css样式。

  2. media的常用参数

    width,height-浏览器的可视宽度,高度

    device-width,device-height-设备屏幕的宽高

  3. 媒体查询其他引入方式

    1.写在style标签中,有条件的执行某个内部样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#divDom{
				width: 100px;
				height: 200px;
				background-color: aqua;
			}
			
		</style>
		<style type="text/css" media="(min-widht:200px) and (wax-width:500px)">
			#divDom{
				background-color: mediumpurple;
			}
		</style>
		<style type="text/css" media="(min-widht:501px) and (wax-width:800px)">
			#divDom{
				background-color: aquamarine;
			}				
		</style>
	</head>
	<body>
		<div id='divDom'></div>
	</body>
</html>

    2.link引入,写在link标签中,有条件的引入外部样式表    

<link rel="stylesheet" href="./111.css" media="(min-widht:200px) and (wax-width:500px)" />

4.什么是flex布局?

     flexableBox是弹性盒子,用来进行弹性布局,可以配合rem处理尺寸的适配问题。

      flex的优点:

            1.用来为盒模型提供最大的灵活性。

             2.更加符合响应式设计的特点。

第三板块:

注意:媒体查询and两边都需要存在空格。

// 媒体查询的代码演示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#divDom{
				width: 100px;
				height: 200px;
				background-color: aqua;
			}
			/*屏幕宽度的处理*/
			@media screen and (min-device-width:200px) and (max-device-width:300px) {
				#divDom{
					background-color: aquamarine;
				}
				
			}
			@media screen and (min-device-width:301px) and (max-device-width:500px) {
				#divDom{
					background-color: deepskyblue;
				}
				
			}
			/*浏览器宽度的处理*/
			@media screen and (min-width:501px) and (max-width:600px) {
				#divDom{
					background-color: red;
				}
				
			}
			@media screen and (min-width:601px) and (max-width:800px) {
				#divDom{
					background-color: blue;
				}
				
			}
		</style>
	</head>
	<body>
		<div id='divDom'></div>
	</body>
</html>


第四板块:

https://img1.sycdn.imooc.com//631de9b8000115f118990843.jpg

https://img1.sycdn.imooc.com//631df2d70001578618900846.jpg




点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
0
获赞与收藏
0

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消