响应式网站01

Posted 2021-03-07 xuman0927

响应式网站概念

弹性网格布局

弹性图片

媒体查询

响应式网站优点

减少工作量 节省时间

网站代码只需要一份

多出来的只是js脚本和css样式

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

搜索优化

响应式网站缺点

加在更多的样式和脚本

设计比较难精准的定位和控制

老版本浏览器兼容性不好

需要掌握技术

浏览器兼容

IE 火狐 谷歌 欧朋 360 

媒体查询

width  ：视口宽度

height：视口高度

device-width ：设备屏幕的宽度

device-height：设备屏幕的高度

orientation：检查设备处于横向还是纵向

aspect-ratio：基于视口宽度和高度的宽高比 如16/9 或4/3

color：每种颜色的位数 bits 如min-color：16位，8位

resolution：检测屏幕或打印机的分辨率如min-resolution：300dpi

以上属性都可以加min-或max-前缀

viewport视口

width  ：视口宽度

device-width ：设备屏幕的宽度

桌面浏览器

只有一个视口就是浏览器显示内容的区域

手机浏览器

布局视口   虚拟宽度不变960以上

可视视口  不可设置修改，用户可以缩放

理想视口  布局视口在一个设备上的最佳尺寸

 

让网页自动适应电脑手机屏幕代码

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

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

width	设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

网站开发前工作

和设计师产品经理沟通如何交互。是否有相应的设计规范，如字体颜色间距等

什么地方必须100%还原什么地方可以灵活处理。

分析设计图结构 大屏 （PC 平板  ） 中屏 （小平板 大屏手机）小屏幕 （移动手机） 不同屏幕设计图

哪些是可变的，哪些是不变的

哪些可以复用的

布局可以用哪些元素

响应式网站设计实践原则

渐进增强

优雅降级

看客户受众决定先设计大屏还是小屏

浏览器 可以先在一个浏览器测试兼容性如谷歌，在测试其他浏览器

断点的选择 例如

0-480px  小屏幕

481-800 中屏幕

801-1400   大屏幕

1400以上  超大屏幕

组织项目目录结构

约定优于配置 建立相应的文件夹结构

css js  images index.html  404.html

编写HTML