标签：兼容 一个 设计师 layout 经理 htm 媒体查询 scala ann
响应式网站概念
弹性网格布局
弹性图片
媒体查询
响应式网站优点
减少工作量 节省时间
网站代码只需要一份
多出来的只是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
标签：兼容 一个 设计师 layout 经理 htm 媒体查询 scala ann
原文地址：https://www.cnblogs.com/Xuman0927/p/12373425.html
