首页 > 代码库 > 做响应式网站前期必会知识点-1前期准备

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

媒体查询

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用驼峰式命名,类名用-。

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