星空网 > 软件开发 > 网页设计

[学习笔记]viewport定义,弹性布局,响应式布局

一,移动端宽度设置
viewport视图窗口,<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">,视窗宽度=设备宽度,默认缩放=1,不允许用户缩放。

二,flexbox,弹性盒子模型:
1,在元素的css中添加display:-webkit-flex就可以转换成弹性盒模型了,然后在多个子元素的CSS中添加flex:1/2/3,就可以让子元素按定义的比例1/2/3分配填满父元素。
2,混合划分:
[学习笔记]viewport定义,弹性布局,响应式布局
子元素可以是固定宽度,也可以是定义flex值,灵活运用,常见于
[学习笔记]viewport定义,弹性布局,响应式布局
图片采用固定宽度防止缩放失真,然后右边的文字采用弹性布局设置flex:1。
3,不定宽高的水平、垂直居中
CSS3方案:.myoff-wrapper{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
更好的flexbox方案:设置父元素,让子元素水平居中
.parent{
display:-webkit-flex;
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
}
更多应用:

[学习笔记]viewport定义,弹性布局,响应式布局
三,响应式布局:在不同设备不同分辨率下都有良好的用户体验
[学习笔记]viewport定义,弹性布局,响应式布局
响应式布局方法是依靠媒体查询实现的:
[学习笔记]viewport定义,弹性布局,响应式布局
媒体查询类型:screen(屏幕)、print(打印机)、handheld(手持设备)、all(通用)
常用媒体查询参数:width,height,device-width,device-height,orientation(检查设备处于横向lanscape还是竖屏portrait)


em:根据父元素的font-size为相对单位;
rem:根据html的font-size为相对单位。

 

 

[学习笔记]viewport定义,弹性布局,响应式布局

 [学习笔记]viewport定义,弹性布局,响应式布局

 




原标题:[学习笔记]viewport定义,弹性布局,响应式布局

关键词:ie

ie
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

营销商品:https://www.goluckyvip.com/tag/4957.html
专家分享:https://www.goluckyvip.com/tag/49570.html
七分靠选品:https://www.goluckyvip.com/tag/4958.html
专属客户经理成长计划:https://www.goluckyvip.com/tag/49583.html
专题推荐:https://www.goluckyvip.com/tag/49584.html
专线fba:https://www.goluckyvip.com/tag/49585.html
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
5月贾汪好玩的地方 贾汪哪有好玩的地方:https://www.vstour.cn/a/363179.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流