【媒体查询】短期工作感受.(第一周) 2020/7/12

博客不应该是口水话 自己看的时候要能想起要能明白--> 直接去博客园好了  长篇的的官方一点的，花点时间整理 不让做过的事情沦为无用功

【复制没关系  关键是写过要有用】
（一）感受（周日）
很棒的地方就是工作的话（和学习相比）强制、有时间的保证，虽然还是挺划的吧，但是如果去了公司，这种强制之下，痛苦没有提升多少，但效率得到了一定量的保障。
我是个很容易放弃的人，前两天干劲满满奈何身体不适，第3 4 5天都很想走。。。
主要是觉得自己前端太菜了，努力不下去，一点点小问题解决不了看半天，这个解决不了的话意味着以后的工作也只是单纯时间的累加而得不到能力的晋升。如果可以还是要搞懂和专精。
其次是戴眼镜看电脑还是会眼睛很累。带防蓝光的极其差。。。。。这个角度上说很不好。第一天眼睛累的睁不开，后面略好一点，但也不见得多好，如果自然恢复还是不能太累。
最后是被我诟病的周围没人就没工作氛围。╮(╯▽╰)╭无奈。。
 
（二）css知识点
1/ (7.8) 
object-fit: cover;是css3新属性 对图片进行切割 然后保留它的比例  自动切割  中间适应 大概是这样。但是要定下宽高，单独img的宽高，或者是img外面套个div【父元素的宽高】。【新闻页面用到了。给的图大小不一，，不过也可以直接展示出来。。就用这个就可以】
2/ (7.9)
（1）white-space:nowrap  规定段落文本不换行。
（2）display： inline-block  ↓ 两个属性都有
inline是行内，简单来说用，是叫他能在一行里展示；
block是块元素~ 可以设置宽高
【关于文本如何自适应这个】====> 直接 两行 多余换行 【自动处理哦。。。自动多的就换行去了】
(但是总高度还是不得行
 display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
（3）browser-sync 插件，安装后所有屏幕打开的调试网址若下滑会一起下滑的
这个不是bug。。。 调试的时候这样 是因为方便
3/ (7.9) 简单的媒体查询（尽量规范 如果可能
我的写法：写个@media，然后把之前的复制过来一遍，这样改比较好改，也很清楚，但是注意，覆盖关系，也就是说用不到（比如margin-right 这么单单的一个,用不到) 不要直接注释，而是改成0，注释掉的话它会自动继承了前面的正常情况下~~~ 不会消失哦，这样找bug就很亏了
==============0718更新：别这样写，确实维护起来太麻烦，没必要记变成0，增加的不必要代码太多，。直接(min-width: 768px) {
min和width用两套就可，甚至不用复用。。。。 html一样就好
(1)
 @media only screen and (max-width: 768px) {
max 768的意思是 小于768的就算作是在这个范围内的，会执行它下面的代码
由于是less写的，这里要注意一下层级关系..
按说是应该内容不变，但是起码css代码要重新写的。但是只复用一小部分media，剩下的由没在media里的继承也是完全可以
(2):hover会在手机端失效，但是select选中状态不会。在vue里可以直接用v-if，相同思想我们--> 在点击按钮的时候改掉 current_page,在函数里手动改选中
document.getElementById("page2").classList.add("page_select");
    document.getElementById("page1").classList.remove("page_select");
    $(document.documentElement).animate({scrollTop:0}, 500);

 

 【前端本身如此 只要实现就好-->投机(我)-->好歹实现之后也不想看别的方法 ---> 如果是像我这样的前端十年工作经验又有什么用呢？

【先介绍有关自适配】博客】看这个 https://blog.csdn.net/qq_17107171/article/details/81876125 
很棒  ok  【复制的话 一定要带着 ！ 带进去 带进去
带进去 不然不会看 的  要自己总结一下。（见（三）
1、为什么不能直接img？【】
2、使用background：
background-image属性，只定义背景图片，避免直接background变成一锅端无效，由此也引出background-repeat。之前no-repeat和repeat，现在多了space+round平铺选项。
（1）容器空间小于图片
space 背景图不会产生缩放，会被裁切
round 缩放背景图至容器大小（非等比例缩放）
（2）容器空间大于图片
space 在不缩放的前提下尽可能多的重复图片
| * * * |←space  |****| ←round（已经扁了
|        |               |****|
round 充分利用容器空间，重复n次之后（x/y轴方向）如果剩余空间大于等于imgWidth*50%则重复第n+1次，否则拉伸已经重复的背景图
（3）使用background-size：
容器与背景图
长度比:150/100=1.5
宽度比:60/50=1.2
cover 取大,所以就按照 长度比 1.5 (等比缩放背景图片)
contain 取小,所以就按宽度比 1.2 (等比缩放背景图片)
3、flex平铺下去就感觉好起来了
display: flex; //弹性盒子，默认弹性盒元素的方向是横向, 123 这样横着接过来
flex-wrap: wrap; //在必要时换行
 flex-direction: column; 竖着布局  直接换行的那种布局
4、媒体查询 前面和后面差不多是继承的关系 前面的就是会顺下来  如果js查询两个分别加载是取消前面的css，单独来写一套的（因为载入的不同css）如果直接css里面来，那么是要继承的，你注释了你也在继承前面的，改的话直接media 然后复制过来 对照html改宽度什么的吧。【苦笑
 
(三) 自适配步骤
【来自链接  https://blog.csdn.net/qq_17107171/article/details/81876125 
①将网页调整权交给网页
      - <head>标签中加入一行viewport（网页默认的宽度和高度）元标签
<meta name="viewport" content="width=device-width， initial-scale=1" />
                           width=device-width：网页宽度默认等于屏幕宽度
                           initial-scale=1；1代表网页初始大小占屏幕面积的100%
- 注意：老式浏览器（例如：IE6、7、8），需要使用css3-mediaqueries.js，如下
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
②禁止使用绝对宽度
        不可：以下这种代码不可使用
width：10px； <!-- 这种代码不可行 -->
        可行：以下两种代码均可
width: 20%;
width:auto;
③静止对字体使用固定大小
        不可：以下这种代码不可使用
font-size: 12px
        可行：以下代码均可行
font-size:1.2em
补充：浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。于是我们就可以通过这个等量关系进行计算了！若已经写好的网页字体的px直接除以16就是em了。
body {
  font: normal 100% Helvetica， Arial， sans-serif;
}
④得是流动布局
     - 就是使用float
#father .panel_text{
 background-color: #F5F5F2;
 float: left;
 margin-left: -88%;
 margin-top: 15%;
 width:295%;  
 height:200%; 
}
⑤选择css，就像if判断
利用css3中的Media Query模块
提示：下面if、if else只是方便解释写的，直接将代码框的代码放在<meat>标签里
if（如果屏幕宽度小于400像素）{
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="css/tinyScreen.css" />
}else if（如果400像素<屏幕宽度<600像素）{
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)" href="css/tinyScreen.css" />
}
⑦还有图片啦！
 写这个简易页面时就踩了一个坑，图片没有设置。。。
css代码用下%号结束就行！
#father .panel_text img{
 width:100%;  
 height:100%;
}
 
（四）最后是附录:
有关工作与学习battle (周五写的) 
1、规律生活 这个倒是很好
2、周围没人 我就开始划
这真的只是在混了
基本完全做不到 难道上班也要开直播 
【痛点】【不知道大公司的话能不能解决】
3、【通病】遇到问题只求解决不求搞懂
而且关键是搜到的东西都看不下去
如果是回去拿到下面 或者是iPad上倒是可以看
 4、机会少一些了，可能性少一些，如果想换职业代价略大。                               
good
1、没什么不好。可以坐下去，生活比较 规律，也不会因为学习患得患失，如果足够忙，感觉是可以满足的。
但我太菜，不求甚解， 这样是进步不了的，三个月前端和零基础还一样，怎么晋升啊。
2、有固定收入，不会太为了钱纠结，想剪头发、变得自信都可以慢慢来。
周边环境还好,不会有过多的人关注你。
3、是工作环境而言，乱七八糟事情少，即使开会也是上班时间完成的. 避免一些麻烦吧 
posted @   send/me/a/cat  阅读(147)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示