css笔记13/完整移动端适配课堂语录

2018-04-19 本文已影响24人 joker731

移动端开发

学会 media query
学会要设计图（没图不做）实在要做也行，丑可别怪我
学会隐藏元素
手机端要加一个 meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//meta:vp
//如果css样式是专门针对手机端做的,就加这个标签不让页面按照980自动缩放

媒体查询

媒体,媒介,要查询些什么,就是媒体查询

代码
<script>
  @meta  (max-width:800){
          body{
                background:red;
      }    
}//当有读好个@meta的时候,要注意互相覆盖,优先级的问题
当检测到是在屏幕小于800的屏幕上,就显示红色
      
</script>

<script>
  @meta  (max-width:800){
          body{
                background:red;
      }    
}
  @meta  (max-width:500){
          body{
                background:red;
      }    
}
  @meta  (max-width:300){
          body{
                background:red;
      }    
}
</script>

注意事项:

当要适配多个不同屏幕的设备时,就要用到多个媒体查询,这里就会出现一个问题,下面的代码会覆盖前面的效果,所以要1000-10 这样由大到小的顺序写代码
此外,还可以用importen重要属性来提高权重,不过不建议,还是用具体的范围标示是最好的1000-800 700-500 -400 -200 这样子
@meta (min-width:300)and(max-width:400){
body{
background:red;
}
}//这样就规定了300-400之间的屏幕了
-还有,如果在同一个css文件里面是不是显得太乱了?我们可不可以用引入的文件来媒体查询?可以的 ,在link标签的media属性里面设置就行了,这里还有一点,只要link标签的东西都是会下载进来页面,最终显示不一定;也就是说,一定会下载,但是究竟会不会显示是另外一回事
移动端和pC端的前端知识是一样的,只不过移动端多个媒体查询而已
有了媒体查询,你可以做任何设备上的页面,无非就是多做几套CSS//响应式页面就是媒体查询做的,响应式就是随着窗口大小变化的页面而已
前端就是web网页页面的,我管你在哪里~!!! atm机上的页面都是前端做

在调试媒体查询代码的时候,只要是学会隐藏元素就是利用chorme开发者工具在两个打小的屏幕之间来回切换,看有没有bug , 通常就是效果出来了,收不回去, 所以整个利用媒体查询功能来调试CSS移动端开发的时候,最多的工作就是隐藏元素

css的调试过程就是麻烦,因为不正交,各种元素之间影响,甚至覆盖,会衍生出bug
响应式的本质就是利用媒体查询功能来检测出,用户设备的屏幕宽度,并且为之提供相应的页面CSS代码,这种开发模式导致开发人员为了完美呈现效果,不得写多套CSS样式,增加了开发难度,这就是不受欢迎的原因
//因此工程师说:我就开发2套样式,PC+移动就两套,不管什么屏幕是pc就显示pc样式,是移动端就显示移动端样式,不管移动端有多个屏幕尺寸都显示同一套样式//这样做很方便,也是目前主流的做法,京东淘宝的网上商城就是这样子的~~~ 因为他们公司内部,pc和移动是两个部门互不干涉,而且后端用几行代码就可以实现了,很轻松//但是知乎就是做响应式的,因为pc和移动端都是同一个部门开发的,所以用了响应式//检测到用户用的是pc就显示pc样式,否则就显示移动端样式
最后有个小问题meta标签,这是历史遗留问题,当初手机显示的页面就是pc端的页面,为了方便当时的用户,就用了自动缩放的做法,meta标签就是来限制他.不让他自动缩放//因为那时候pc页面普遍是980宽度,手机只有300-400,为了看见页面只能缩放了~~~

前端工程师是根据图来做页面的,当一个设计只给你一张pc页面,不给移动端就叫你全做,就怼他

前端因为移动端+pc端之间的先手开发顺序,起了一个modle first的名词,很蛋疼,其实就是媒体查询而已,不过老师建议先开发移动端的,因为,现在都是用手机的用户多啊~~~
手机是没有hover的,所以都是给某个属性2个css效果,如:a.active{},然后利用js来进行切换,这样就不会干涉到样式了/
切换的代码:xx.onclick=function(){
yy.classList.toggle('active')
}
最后我们发现,用媒体查询的后果就是我们写了多套CSS

移动端的特点,或者说是移动端开发的注意事项

手机端的交互方式不一样
没有 hover
有 touch 事件
没有 resize
没有滚动条

那么我们会发觉一个问题,这样写的代码很乱~~~为什么不干脆来两套呢?分离开呢?
//这样的话就需要后端代码,来检测用户用的是什么手机,或者电脑,来登录这个网站,后端来选择发送相应设备的页面代码,完全没有响应式这回事~~_{现在整个中国都是这样做的,中国根本没有什么响应式的页面,京东淘宝都是这样做的}~!!!!用后端来解决这个问题,响应式只是面试用一下

REM和EM的区别:rem是根元素html的font-size;em是自己的font-size
不同的设备有不同的样子就是响应式

当老板提出需求,这个页面给我做移动端~~~~
那你要问他要2分设计图,如果没有就不干~~~~
手机有多个牌子,有多个屏幕分辨率,//手机其实是做不了响应式的
-百分比

整体缩放

后来发现:

一切以宽度做,就能保证完美还原设计

总结:淘宝工程师最后rem=font-size=page weigh @@@@!!!! 这是用JavaScript实现的

首先rem这个长度单位是根元素的font-size也就是<html>元素的font-size大小
前端遇到不同屏幕的小设备,太多了,难以统一,有等比例缩放就太好了~~~
所以淘宝工程师想到了一个方法:用js获取设备屏幕的宽度,让它等长于rem这个长度;然后把页面的font-size让 body标签来限制,不让字体受html的rem影响;
然后页面上所有的宽度都用rem的比例,字体却不收到影响,完美
// 可是随之而来又出现了新问题,所有大小都是小数,而且很多不足要微调

这届就是讲微调

为了舒服,不总是用小数就用十分之一的pageweight,注意小心十分之一太小,小过12px,这是浏览器默认临界点,默认最小的font-size,如果小过他就出bug
还有,1像素最小的,不可能最小的了

可是终究是麻烦,最终办法用sass

其实less sass是一种变相的门槛,因为你会了,你就是懂一点英文,会看文档,会用命令