![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
display:flex
撸码种地
实战案例,只为实战
展开
-
3、响应式布局?什么是响应式布局?如何实现响应式布局?
3.1什么是响应式布局?答:在一个项目的内容(模块、布局、内容)发生增删改时,项目可以自适应的发生一定变化而且不影响用户使用,且更换不用的设备可以同样访问此项目;这样的布局叫做响应式布局!优点:一个项目适应不用设备;缺点:开发成本高,设计和ui方案都比较多;3.2如何实现响应式布局?答:媒体查询:监测设备的特性,根据所指定的条件,设置不同的css样式。(例如:监测浏览器窗口的宽度,如果小于320pxbody背景为红色)媒体查询一般监测:视口的宽度、浏览器窗口的宽、...原创 2020-07-28 20:43:50 · 386 阅读 · 0 评论 -
2、display:flex 弹性盒的属性以及在移动端的实战案例
2.1.1 弹性盒实现父级盒子对子元素的布局控制,(给父元素添加display:flex,控制子元素的一些布局)<style> .parent{ display:flex;//给父元素添加display:flex; width:100px;height:100px;background:#ccc;} .son{width:100px;height:100px;background:#00f; }</st...原创 2020-07-28 09:11:47 · 249 阅读 · 0 评论