CSS响应式布局学习笔记（多种方法解决响应式问题）

时间 2020-09-14

标签 css 响应布局学习笔记多种方法解决问题栏目 CSS 繁體版

原文原文链接

在作web开发的工做中，会遇到须要我给页面根据设计的要求，进行响应式布局，这里跟你们分享下我对于响应式布局的解决方法：

我主要利用的是CSS3 媒体查询，即media queries，能够针对不一样的媒体类型定义不一样的样式，从而实现响应式布局。也能够针对不一样的分辨率设置不一样的样式。
在实际操做中，咱们使用到的代码有：

@media all 用于全部设备 print 用于打印机和打印预览。css

screen 用于电脑屏幕，平板电脑，智能手机等。 html

speech 应用于屏幕阅读器等发声设备。web

orientation:portrait : 竖屏小程序

orientation:landscape : 横屏微信小程序

注：横竖屏操做，只是针对移动端的。在PC端屏幕永远是竖屏的浏览器

例如：

@media all and (min-width:500px){微信

　　#box{ background:blue;}布局

}字体

这段代码的含义当分辨率>=500px的时候，会识别大括号里面的代码

一样咱们能够知道：

@media all and (max-width:500px){网站

#box{ background:blue;}

}

这段代码的含义当分辨率<=500px的时候，会识别大括号里面的代码

而当咱们使用外部引入css的时候，可在link标签上加这样的代码：

这是我布局响应式的css依据，接下来我给你们分享下我经常使用的几种css单位：

rem

rem单位是相对于字体大小的html元素，也称为根元素，也是我开发的时候常常用到的单位。

html {

font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有误差，具体表现为 1rem = 9.93px。 */

}

.sqaure {

width: 5rem; /* 50px */

height: 5rem; /* 50px */

}

em

相对于rem是于根元素（html）的字体大小，em则是相对于其父元素的字体大小，且最多取到小数点的后三位

rpx

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx，也是我微信小程序开发的经常使用单位。

不管是在iPhone6上面仍是其余机型上面都是750rpx的屏幕宽度，拿iPhone6来说，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px = 1物理像素。

vw 和 vh

vw为视窗宽度，1vw=视窗宽度的1%

vh为视窗高度，1vh=视窗高度的1%

这是我开发最为喜欢的单位，无需作任何换算，还简单。

看到这里你可能会疑问，为何没有px这个原始的像素单位，我这里说下个人见解，px设置字体大小时，是比较稳定和精确。可是这种方法存在一个问题，当用户在浏览器中浏览咱们制做的Web页面时，若是改变了浏览器的缩放，这时会使用咱们的Web页面布局被打破。这样对于那些关心本身网站可用性的用户来讲，就是一个大问题了，而咱们用刚才的媒体查询来进行修改，会很是麻烦（代码量增长一倍，尚未上面的单位写的代码兼容稳定），而如今的页面开发都是须要你的代码兼容两端和各类尺寸的（手机电脑端），对于我来讲，px确实已经不能做为主要开发的单位了。