有关响应式布局

时间 2019-11-15

标签有关响应布局繁體版

原文原文链接

（持续更新中......）浏览器

设置meta 标签

<!-- HTML <head></head> 中加入 -->

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

注：scala

width 和height 指令分别指定视区的逻辑宽度和高度，单位是以像素为单位的数字或特殊标记符号（如device-width）；code
initial-scale 指页面初始缩放比例，默认值因智能手机浏览器的不一样而有所差别，一般状况下设备会在浏览器中呈现出整个Web 页面，设为1.0则将显示未经缩放的Web 文档；文档
user-scalable 指令指定用户是否能够缩放视区(yes/no);it
maximum-scale 和minimum-scale 指令用于设置用户对Web页面缩放比例的限制。范围为0.25 ~ 10.0;渲染

使用媒体查询(Media Query) 对指定视图宽度范围的页面进行渲染

例如：meta

@media screen and (max-width: 980px) {
  /* styles */
}

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}