发表于： 2020-07-14 20:50:14
1 1207
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
1.写完页面3
2.开始看媒体查询
问题
设置不同的样式如何设置？ 比如370px 我希望一切正常显示 我要做什么
方案
算是找到div中用样式控制的。大佬资料
灵感
就是查询不同尺寸，然后显示不同效果
370两列显示，这时候内容就要设置固定宽度了，不然会挤压到一个字到下一行。
资料1
媒介类型(Media Types)
允许你定义以何种媒介来提交文档。文
档可以被显示在显示器、纸媒介或者听觉浏览器等等。
例子
我使用media设定手机屏幕媒介，来提交，文档显示手机屏幕的尺寸
使用media设定岛妹妹屏幕媒介，来提交，文档显示电脑屏幕的尺寸
不同的媒介类型
hqneheld 手持设备 ；screen 电脑显示器 ；prjection 打印机 ；
例子
告知浏览器在显示器上显示 14 像素的 Verdana 字体。
但是假如页面需要被打印，将使用 10 个像素的 Times 字体。
注意：font-weight 被设置为粗体，不论显示器还是纸媒介
media screen
p.test {font-family:verdana,sans-serif;font-size:14px
媒体屏幕
p。测试{无衬线字体类型:verdana,字体大小:14 px
media print
p.test {font-family:times,serif;font-size:10px
媒体打印
p。测试{衬线字体类型:倍;字体大小:10 px
media screen,print
p.test {font-weight:bold
媒体屏幕,打印
p。测试{粗细:大胆
资料2
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，
例子
@media screen and (max-width: 900px) {
body {
background-color:lightblue;
}
}
改掉的是样式变化，1200一种颜色，900宽度是一种颜色。
那我设定div宽度也是可以的吧
1200宽度div尺寸800px，900宽度 div80px；
问题
body是整个背景色 ，但是单个div 哪里有类名？ 方案 ：div引用这个类名样式 ，然后使用media来引用 、 失败
研究一下，蒙城写的 ，看看有没有突破口
资料3
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
结论 总体用bootstrap格栅，然后col全部都是百分百 的父类
然后 768px 设置col1 多少宽度 显示
然后990px 设置col1 多少宽度 显示
结论
1.对一个div写了多个media 只有一个有用，还有一个是pc段默认的 。
2.最后一个media 才有作用
3.好像语法错了，得用
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
这样的样式？
4.大佬资料
例子1
media文件
直接打开网页尺寸 1100px
line-height: 4rem;
@media screen and (max-width: 992px) {
.startbox{
line-height: 3rem;
}
css文件
.startbox{
line-height: 4rem;
}
HTML文件
<div class="container startbox">
例子2
宽度992px
.toppicture1{
width: 1.9rem;
height: 1.8rem;
}
宽度1100px
.toppicture1{
width: 2.5rem;
height: 2.4rem;
}
例子3
@media screen and (max-width: 992px) {
.footerul{
flex-flow: column wrap;
align-items: center;
height: 6rem;
}
}
@media screen and (max-width:476px){
.footerul{
flex-flow: column wrap;
align-items: center;
height: 15rem;
}
}
例子5
@media screen and (max-width:992px) and (min-width:768px){
.mainspan2{
text-align: left;
width: 14rem;
}
}
@media screen and (max-width:425px){
.mainspan2{
text-align: left;
width: 14rem;
}
}
结论
1 通过文字行高样式来，来控制div不同高度！
2.修改图标大小 来适配屏幕
3.通过 footerul控制盒子高度 ，不同的高度控制，在不同宽度下，显示的列数不同
例子
A 992宽度， height整个盒子高度设置3rem，一行10个内容展示，
A 992宽度， height整个盒子高度设置6rem，一行5展示，
A 992宽度， height整个盒子高度设置9rem，一行3展示， 第二个4个
A 992宽度， height整个盒子高度设置12rem，一行3展示，
盒子高度3rem，其中内容决定排列变化 ，盒子内容位置设定 垂直向上 居中定位，
盒子内容不是块级元素，而是行内元素时，
当高度增加，行内元素向下一行展示，如果盒子设置居中，下一行居中展示，如果没设置，那就左边展示。
4.footterul 盒子高度，多个media文件设置不同高度。见上面例子
5.一行内容间距条件，内容宽度调节
992 宽度最大 一行10内容 2行 每个内容宽度固定，间距小 14rem文字宽度
768 宽度中等 一行2内容 5行 每个内容宽度增加，间距中 26 rem文字宽度
425 宽度 小 一行1个内容 10行 每个内容宽度 较宽，间距大 26rem 文字宽度
注意问题
对于一行的内容间距 宽度 不同，文字位置方式要有所变化
问题
14rem单位怎么来的？
768宽度 一行2个内容 内容宽度375px 375/2=187px 18rem
问题992是什么？
1.超小屏幕（手机） 768px以下
2.小屏设备（平板） 768px-992px
3.中等屏幕（旧式电脑） 992px-1200px
4.大屏设备（现代电脑） 1200px以上
现在已知
可以不同媒介控制字体大小 ！
可以对不同的屏幕尺寸设置不同的样式！
通过文字 图标 来改div中样式高度
通过盒子高度来改变内容排列方式 ，一行几个效果
通过布局方式，内容div宽度变化来改变 ，一行几个效果
明天计划的事情：（一定要写非常细致的内容）
1.自己写定制屏幕的媒体查询 做任务9
遇到的问题：（遇到什么困难，怎么解决的）
1.媒体查询资料不会查 看到的资料 全部看的懵逼
方案 看看大佬的代码怎么写的
收获：（通过今天的学习，学到了什么知识）
1.媒体查询基本资料 构造
提交任务9
https://miemieshule.github.io/task-8/task8-1/tesk8-1.html
返回列表
评论