css响应式布局设计 |nodejs postcss

/*使用@media屏幕尺寸媒体查询*/
/*样式1：当屏幕宽度小于600px时，改变div的样式*/
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
/*样式2：当屏幕宽度在600px到900px之间时，改变div的样式*/
@media screen and (min-width: 600px) and (max-width: 900px) {
div {
font-size: 20px;
}
}
/*使用百分比或者Viewport单位*/
/*样式3：使用百分比设置元素宽度和高度*/
div {
width: 50%;
height: 50%;
}
/*样式4：使用Viewport单位设置元素宽度和高度*/
div {
width: 50vw; /*50%的视窗宽度*/
height: 50vh; /*50%的视窗高度*/
}

以上技巧可以让网站在不同设备上展示出更加友好的效果，提高用户的体验感。在实现响应式布局的过程中，还要注意避免因样式冲突而影响网站的布局。通过适时的调整，大家可以实现优美的响应式布局设计。