CSS排版:响应式布局

CSS学习系列

css响应式布局

css响应式布局:基本布局已经完成,确保自动适配各种屏幕,在不同的屏幕效果看起来效果好。学习使用media query 自动调整显示效果。媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询。使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

1、@media(max-width:85rem){
body
padding:0 2.5rem
}

2、@media(max-width:60rem)

.content-left,.content-right
float:none;
width:100%

.content-right
padding-left:0;
padding-top:4rem;

Last modified: 2019年11月14日

Previous Story

CSS学习系列

CSS排版:边距

css边距:在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

...

Next Story

CSS学习系列

css背景:背景颜色

css背景颜色:网站视觉效果的基础,为设计奠定基调,学习如何添加背景颜色使用的不同类型的颜色代码。使用CSS背景颜色为您的网站增添趣味,使用Hex颜色代码,任意尺寸、固定或填充均可。

...