发表于: 2018-09-02 23:06:11
2 828
今天完成的事情:任务八写到了轮播图。开始写中间部分。轮播图是看资料复制的,组件还有样式摸得还不是很清楚。正在学习中。
明天计划的事情:明天准备做完任务八的第一个页面。在学习一下媒体查询。开始响应式布局。
遇到的问题:bootstrap附带的样式无法满足自己的需求,需要从新写样式。但是覆盖不掉,这时候需要用到important;
收获:
媒体查询,怎样使用media
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容
一、
首先需要在html文档中添加以下代码,用来兼容移动设备的显示效果
<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
ps:
width=device-width:宽度等于当前设备的宽度
initial-scale=1:初始的缩放比例(默认为1)
maximum-scale=1:允许用户缩放到得最大比例(默认为1)
user-scalable=no:用户不能手动缩放
二、怎样在CSS文件中写CSS响应式媒体查询
例:
@media screen and (max-width:720px) and (min-width:320px){
body{
background-color:red;
}
@media screen and (max-width:320px){
body{
background-color:blue;
}
}
ps:该段媒体查询的意思是:当设备屏幕宽度在320px——720px之间时,媒体查询中body的背景色(background-color:red;)会重叠之前的body背景色,当设备屏幕宽度在320px以下时,媒体查询中body的body背景色(background-color:blue;)会重叠之前的body背景色
相对单位
如果媒体查询@media使用的是相对单位,如rem,这里有一个坑需要着重强调一下
一般而言,rem是相对于HTML的字体大小的。但是,由于媒体查询的级别非常高,它并不是HTML的子元素,不是相对于HTML,而是相对于浏览器的,而浏览器的默认字体大小是16px
如果HTML设置字体大小为12px,设置如下媒体查询
media="only screen and (max-width:1rem)"
实际上,max-width等于16px,而不是12px
而正是由于媒体查询是相对于浏览器的, 所以使用rem就没有必要,完全可以使用em来替代
media="only screen and (max-width:1em)"
评论