手机端WEB开发与拓展

本文介绍了手机端WEB开发的重点,包括视口概念、CSS初始化推荐使用normalize.css、flex布局及其属性设置、rem适配布局原理及媒体查询应用,还提及了less预处理器的基础知识和vw/vh相对视口尺寸的使用。
摘要由CSDN通过智能技术生成

        

手机端

视口

布局视口,视觉视口,理想视口

理想视口需要给移动端页面添加meta视口标签

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

CSS初始化

移动端css初始化推荐使用normalize.css/

官网地址:http://necolas.github.io/normalize.css/

移动端盒子模型内外边距和边框不会撑大盒子

flex布局

flex是flexible box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局 属性:display:flex

  • 当给父盒子设置flex布局后,子元素的float,clear和vertical-align将失效

  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素,成为flex容器,它的所有子元素自动成为容器成员,成为flex项目

父项属性

  • flex-directi

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值