响应式开发学习之旅-------学习的目标 和 什么是响应式网站

学习的目标

1，什么是响应式网站

2，如何从零开始编写一个响应式网站（如何改装）

3，开发中有哪些主流的，前沿的技术

4，网站开发必备知识讲解

 

什么是响应式网站

简单来说：

同一个网站，在不同尺寸的设备上会显示不一样的样式，包括布局，大小，显示内容等。

优点和缺点：

优点：

减少工作量，

     只有一个网站即可。

     多出来的工作量只是js脚本，css样式。

节省时间

每个设备都能得到正确的设计

缺点

     会加载更多的样式和脚本资源

     设计比较难精确定位和控制

     老版本浏览器兼容不好

 

媒体查询

媒体查询(css3增强了它，包含了更多的媒体类型和函数)

eg  @media all and (min-width:800px) and (orientation:landscape) {}

连接符：

     and ,(等同于or或) not only 

主要的媒体属性(还可以加前缀,比如max-,min-)

     width，

     height，

     device-width(渲染表面的宽度，就是设备屏幕的宽度)，

     device-height,

 

视口(viewport)宽度和设备宽度

     width和device-width

     pc只有一种视口，就是浏览器的宽度

     mobile有三种

     布局视口(layout viewport) 在呈现到手机上之前，先按照960或更高造出来

     可视视口(visual viewport) 放大缩小就是在改变可视视口的宽高(和上面的关系仿佛用放大镜看书)

     理想视口(ideal viewport) 布局视口在一个设备上的最佳尺寸，宽度和可视视口相同

如何开启理想视口

/* <meta name="viewport" content="width=device-width"/> */

    意思是，meta类型为veiwport，布局视口的宽度设为设备屏幕的宽度（也就是可视视口）,如果不写，那默认为布局视口的宽度

/* <meta name="viewname" content="width=device-width,minimum-scale=1.0,maximum=1.0,user-scalable=no" /> 

     意思是，最小宽度为1，最大宽度为1，禁止用户缩放 */

 

如何分析设计图

     和设计师聊好，哪里100%还原，哪里灵活处理

     搞清楚哪里不会随设备改变，哪里要改变，进而影响html结构

 

响应式网站设计原则

     渐进增强，*优雅降级

     先设计小的还是大的，看项目的方向，看pc用户多还是mobile用户多

     先用google调试，再调试其他的，然后做些修修补补的工作，谷歌浏览器用户大，如果着急可以先上

     要考虑好断点的选择，断点就是说媒体查询用的最大最小宽度。比如480以下小屏幕，481-800中屏幕，801-1400大屏幕，再大巨屏幕。具体可以参考设计师和产品的意见。