简述移动端常见的布局方式

最新推荐文章于 2024-05-24 13:48:15 发布

转载最新推荐文章于 2024-05-24 13:48:15 发布 · 435 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wxh0929/p/11152627.html

文章标签：

#javascript #ViewUI

1、响应式布局：px

概念：

响应式网页设计就是一个网站能够兼容多个终端-----而不是为每个终端做一个特定的版本；

其目的是为用户提供更加舒适的界面和更好的用户体验；

优缺点：
- 优点：
  - 面对不同分辨率设备灵活性强；
  - 能够快捷解决多设备显示适应问题；
- 缺点：
  - 兼容各种设备工作量大，效率低下；
  - 代码累赘，会出现隐藏无用代码，加载时间过长；

步骤：

设置meta标签（App.vue或者首html文件）

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
//user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

通过媒体查询来设置样式media query（media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现）

@media screen and (max-width:980px){//设置不同设备中div的布局方式
     #head { … }
     #content { … }
     #footer { … }
}这里面的样式会覆盖掉之前所定义的样式。

设置多种视图宽度

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

字体设置（一般rem更方便使用）https://www.cnblogs.com/YYvam1288/p/5123272.html

@media screen and (min-width: 768px) {
  html,
  body {
    font-size: 8px !important;
  }
}

@media screen and (min-width: 992px) {
  html,
  body {
    font-size: 10px !important;
  }
}

@media screen and (min-width: 1200px) {
  html,
  body {
    font-size: 14px !important;
  }
}

@media screen and (min-width: 1500px) {
  html,
  body {
    font-size: 16px !important;
  }
}

响应式布局所涉及到的问题：

图片液态化：

img{//要保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）,不可以使用width:100%,会让图片跟他的容器一样宽
    max-width:100%;
    height:auto;  
}

2、弹性布局（百分比布局、流式布局）

百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。

如果用百分比写width，那么指的是父元素width的百分之多少。
如果用百分比写height，那么指的是父元素height的百分之多少。
如果用百分比写padding，那么指的是父元素width的百分之（无视padding）多少，无论是水平的padding还是竖直的padding。
如果用百分比写margin，那么指的是父元素width的百分之（无视padding）多少，无论是水平的margin还是竖直的margin。

不能用百分比写border的宽度

3、rem布局

概念：rem是相对于根元素（html）的字体大小的单位；

em一般都是以<body>的“font-size”为基准（表示父元素的字号的倍数）；

比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”；

body{
  font-size:10px;  
}
p{
  font-size:1.4em;//14px
}

4、参考资料：

https://www.cnblogs.com/fengyingwang/p/6073795.html

转载于:https://www.cnblogs.com/wxh0929/p/11152627.html