响应式网页设计
viewport
定义
- 可视区域
- 移动端:布局视口(大部分980px)/理想视口(视口宽度=设备宽度)
设置
<meta name="viewport" content="width=device-width,initial-scale=1.0">设置选项
- width 视口宽度 通常设置为device-width
- height 视口高度
- initical-calse 初始化缩放比例
- maximum-scale 最大缩放比例
- minimum-scale 最小缩放比例
- user-scaleable:yes/no 是否允许用户缩放
媒体查询
媒体类型
- screen用于电脑显示器
- print用于打印机
- all用于所有的媒体设备
- ...
媒体特性
- width 视口宽度
- max-width 最大视口宽度 视口宽度<=某个值
- min-width 最小视口宽度 视口宽度>=某个值
- height 视口高度
- max-height 最大视口高度
- min-height 最小视口高度
- device-width 设备宽度
- max-device-width 最大设备宽度
- min-device-width 最小设备宽度
- device-height 设备高度
- max-device-height 最大设备高度
- min-device-height 最小设备高度
- aspect-ratio 视口宽高比
- max-aspect-ratio 最大视口宽高比
- min-aspect-ratio 最小视口宽高比
- device-aspect-ratio 设备视口宽高比
- max-device-aspect-ratio 最大设备视口宽高比
- min-device-aspect-ratio 最小视口宽高比
- orientation设备的使用方向:landscape(水平)/portrait(垂直方向)
- resolution 屏幕像素比 单位dppx
- max-resolution 最大屏幕像素比
min-resolution 最小屏幕像素比
媒体查询 用法
@media () {
选择器{
}
}- and 并且
- , 或者
- only
not
断点
- <= 480px 手机 小屏幕
480px 并且 <= 800px 平板 中等屏幕
800px <= 1400px PC 大屏幕
= 1400px 超大屏幕
1、JQuery方式验证表单和AJAX提交
2、根据抵质押物类型设置合同详情中的显示标题时遇到的一个问题
3、ASP.NET MVC 中表单的Encode及Decode
4、[导入]OpenGL中的鼠标控制
5、linux-----时间戳