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

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

简述移动端常见的布局方式相关推荐

Java swing五种常见的布局方式【转载】
Java swing五种常见的布局方式 1. 边界布局(BorderLayout) 2.流式布局(FlowLayout) 3.网格布局(GridLayout) 4.盒子布局(BoxLaYout) 5. ...
CSS常见的布局方式
====== 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略窄的单列布局 ![](https://im ...
前端页面几种常见的布局方式
1.静态布局 2.弹性布局 3.自适应布局 4.流式布局 5.响应式布局 <meta http-equiv="X-UA-Compatible" content="I ...
vue、html 实现头尾固定，中间滚动的布局(移动端常见的布局)
前言: 头尾固定,中间滚动的布局,这种布局很常见,移动端.pc端都常见.不过移动端居多. 实现过程: html实现过程其实就是一个盒子里面三个部分头,身体,脚 . 身体的高度需要减去头和 ...
html表格布局方式有那几种,前端几种常见的布局方式
1.静态布局(固定宽高) 2.弹性布局(flex)----常用 3.圣杯布局 flex:flex-group.flex-shrink.flex-basis flex:auto/none/负数/一个长度 ...
布局 java swing_java中Swing五种常见的布局方式
1. 边界布局(BorderLayout) 2.流式布局(FlowLayout) 3.网格布局(GridLayout) 4.盒子布局(BoxLaYout) 5.空布局(null) 还有其他两种布局,分 ...
移动端常见的开发布局方式
一.流式布局流式布局就是百分比布局,也称非固定像素布局.它通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充.流式布局方式是移动web开发中使用的比较常见的布 ...
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
目录一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...
移动端页面布局方式，简单记录一下
目录 1.视口 2.多倍图 3.移动端开发选择 4.移动端技术解决方案 5.移动端常见布局 6.流式布局 7.flex弹性布局 ①flex与传统布局比较 ②flex布局原理 ③常见父项属性 8.rem ...
[转]企业网站首页设计常见的6种布局方式
在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让 ...

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

简述移动端常见的布局方式相关推荐

最新文章

热门文章