有关响应式布局

2019年9月7日 151次阅读 来源: Zhang_zm

（持续更新中……）

设置meta 标签

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

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

注：

  • width 和height 指令分别指定视区的逻辑宽度和高度，单位是以像素为单位的数字或特殊标记符号（如device-width）；

  • initial-scale 指页面初始缩放比例，默认值因智能手机浏览器的不同而有所差异，通常情况下设备会在浏览器中呈现出整个Web 页面，设为1.0则将显示未经缩放的Web 文档；

  • user-scalable 指令指定用户是否可以缩放视区(yes/no);

  • maximum-scale 和minimum-scale 指令用于设置用户对Web页面缩放比例的限制。范围为0.25 ~ 10.0;

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

例如：

@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) {}
    原文作者：Zhang_zm
    原文地址: https://segmentfault.com/a/1190000009189589
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞