做响应式网站前期必会知识点-1前期准备

Posted 2020-09-01 crystalhuhu

媒体查询

1、媒体类型

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

其中media后面的那个单词是媒体类型

all所有媒体类型（默认，可以不写），screen屏幕，这两个是最常用的。

 

2、逻辑操作符

媒体查询的意思就是后面这个逻辑表达式为真，里面的css起作用。

中间and是逻辑操作符

and 与      都为真才真

or或逗号   有一个真就为真   

not 非       not的有效范围就到逗号   not (screen and man-width=800px),min-width=480px。逗号后面你也用not就必须再写not

only 仅仅  老旧浏览器不支持媒体查询时候使用，老旧浏览器不支持媒体查询，

media=screen老浏览器视为真，不管你后面写什么，都是真，然后你的样式就乱了。

media=only老浏览器视为false ，媒体查询的样式就不会混乱了基本样式了

 

3、css媒体属性

width  视口宽

height 视口高

device-width 设备宽

device-height 设备高

orientation  设备横屏竖屏

resolution 屏幕分辨率

aspect-ratio 宽高比

color 颜色位数

以上是最常用的几个，前面都可以加max-，min-。

 

4、viewport视口

布局视口layout、可视视口visual、理想视口ideal。

这是哪个视口咋来的呢？

pc端网站太大在手机上显示不全，浏览器的解决办法是先在一个虚拟的布局视口中显示完整的pc页面。然后进行缩放，让他在手机上能正好显示，此时缩放比为0.4。这时候你看见的窗口叫可视窗口，他展示了一个pc大小的页面，假定塔有960px，这时候可视窗口的大小是960px。假如我把缩放比调试成0.5，pc页面不能手机这么大的屏幕完全显示，塔指显示了一部分比如800px的页面，此时可视窗口大小是800px。可视窗口是会改变的。

即使你把pc页面整个放到手机上呈现出来，但是因为缩放的太小了，你还是要手动放大。要是布局视口和可视窗口一样大就不会缩放了，可视窗口等于设备宽度，三者统一的时候，就有了最加体验，不需要缩放就可以很好地查看页面，因此就有理想视口的概念。

<meta name="viewport"  content="width=device-width,
minimum-sale=1.0,
maximum-sale=1.0,
user-scalable=no"/>

在head加入这样一句话，视口宽度等于设备宽度，最大最小缩放比为1，用户不允许缩放。我们就可以在理想视口开发了。

也可以这样写，但是就是允许用户缩放了

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 

5、怎样分析设计图

作为前端工程师，当你得到设计图的时候应该做些什么？

与设计师沟通

①和设计师沟通网站如何交互？

②问设计师要设计规范[字体、颜色、字号、间距等]？

③什么地方必须百分之百还原？

分析设计图

①观察哪些地方随屏幕大小变化而变化，哪些不变

②分析整体结构，拆分成几块，哪些模块可以复用，比如top和footer，方便模板渲染

③分析布局，每一块区域如何排列，使用用什么标签，元素如何排版定位等等

④切图，用ps或者sketch。注意切图类型的选择，透明图用png，动态图用gif，颜色丰富的图用jpg。如果切完很大最好压缩一下。

6、响应式网站的设计原则

①确定的适配的浏览器，pc端一般chrome，firefox，ie9以上，safari。

　　　　　　　　　　　phone ，安卓自带浏览器，苹果的safari，uc，欧朋，360等。

②优雅降级scraceful degradation  就是先用最新的技术，写出最漂亮的状态，而不是为了适配老ie而写很难看的页面。

③写页面是先写pc还是phone端？哪个用户多，从哪个先写。

④不同设备显示的内容是否相同，就是小设备是否还要显示那么多东西？由产品经理决定就好

⑤断点，小于等于480px,大于481px小于等于800px，大于801px小于等于1400px,1400+。写媒体查询不要根据设备类型来写

逻辑表达式要用em单位，要÷16。为啥呢? 这是一个坑

逻辑表达式里em相对rem相对安全,em是相对父元素，rem是相对html元素。

÷16是因为浏览器默认字体一般是16，媒体查询会根据默认字体来算。

 

7、如何组织目录结构

目录用小写、简写、单数命名

库可以放在vendor文件夹，加压缩的加.min

id用驼峰式命名，类名用-。