第一板块:六个案例学会响应式布局,第一章;第二章,大谷
第二板块:
什么是媒体查询(media)?(移动端使用较多)
为不同尺寸的屏幕设定不同的css样式。
media的常用参数
width,height-浏览器的可视宽度,高度
device-width,device-height-设备屏幕的宽高
媒体查询其他引入方式
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>
第四板块:
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦