autoResponse_01 响应式基本原则

 

 

---

 

 

• 弹性布局
  • 流动式布局 缩放页面版式不变
• 响应式布局
  • 改变页面结构
  • 媒体查询
  • 统一体验不同展现
  • 三要素
    • 流动网格
    • 弹性图片
    • 媒体查询
  • 优化搜索 ，统计用户终端来源
  • 设计原则:
    • 渐进增强，优雅降级
    • 优先受重终端设计
    • 取舍页面展示内容
    • 根据媒体查询显示范围设计样式
• weixin 浏览器和 chrome
• viewport 视口宽度
  • 布局视口 layout viewport
  • 可视视口 visual ..
  • 理想视口 ideal

 

---

 

媒体查询:

@media mediatype and|or|not|only (media feature) {
    CSS-Code;
}


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

@media only srceen ...

 

使用理想视口

<meta name="viewport" content="width=device-width,maxmum-scale=1.0,minmum-scale=1.0,user-scalable=no" />

<meta name="viewport"  content="with=device-width ,   maxmum-scale=1.0 , minmum-scale=1.0, user-scalable=no  "/>
　　限制放大缩小倍数 禁用放大缩小

 

设计分析:

ui——切图 ， 不同终端的实现效果图。

 

 

 

---

　　响应式v布局概念，过渡: 弹性布局 -> 响应式 ， 响应式: 流动网格,弹性图片,媒体查询 ， @media ， not|and|or|only  ,  viewport: layout/visual/ideal , <meta name="viewport" content="width=device-width"/> ,maxmum-scale=1.0, minmum-scale=1.0, user-scalable=no 禁止缩放 ，

　　设计:  逐渐完善，优先移动/pc,展示内容，根据设备范围不针对特定设备兼容。