响应式布局
码上流星&洒下星辰
前端领域新星创作者、技术传递力量、传承布道精神、期待你我共同进步
展开
-
rem的使用方式
rem是什么?rem是指相对于根元素的字体大小的单位在日常开发过程中我们通常把根元素(html/body)的字体设置为10px,方便于我们计算(此时子元素的1rem就相当于10px)rem与em的区别,各自的优缺点?em子元素字体大小的em是相对于父元素字体大小rem是根据根元素的字体大小em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。...原创 2022-02-12 17:44:53 · 764 阅读 · 0 评论 -
flex弹性布局
什么是flexfelxbox布局是用来进行弹性布局,可以适配rem处理尺寸的适配问题优点:任何一个容器都可以指定为flex布局,比较灵活更加符合响应式布局的特点缺点:浏览器兼容性不高,只兼容ie9以上浏览器flex-direction作用:子元素在父元素盒子中的排列方式属性:row是默认值,从左到右排列row-reverse与row相反,从右往左column将子元素垂直显示,默认从上往下column-reverse与column相反,从下往上后续补充…...原创 2022-02-11 19:17:47 · 275 阅读 · 0 评论 -
多媒体查询
min-device-width跟min-width的区别@media screen and (min-device-width:375px) and (max-device-width:540px){ #div0{ background: red; }}@media screen and (min-width:541px) and (max-width:800px){ #div0{ background: blue; }}min-device-width是设备整个显示区原创 2022-02-11 14:57:13 · 783 阅读 · 1 评论