建站平台社区,西宁微网站建设多少钱,河南小学网站建设,地方门户网站的特点流式布局#xff08;百分比布局#xff09;
使用百分比、相对单位#xff08;如 em、rem#xff09;等来设置元素的宽度#xff0c;使页面元素根据视口大小的变化进行调整。这种方法可以实现基本的自适应效果#xff0c;但可能在不同设备上显示不一致。 !DOCTYPE ht…流式布局百分比布局
使用百分比、相对单位如 em、rem等来设置元素的宽度使页面元素根据视口大小的变化进行调整。这种方法可以实现基本的自适应效果但可能在不同设备上显示不一致。 !DOCTYPE html
html
headmeta nameviewport contentwidthdevice-width, initial-scale1.0style.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 20px;}.box {width: 100%;height: 200px;background-color: #e0e0e0;margin-bottom: 20px;}media (min-width: 768px) {.box {width: 50%;}}media (min-width: 1024px) {.box {width: 33.33%;}}/style
/head
bodydiv classcontainerdiv classbox/divdiv classbox/divdiv classbox/div/div
/body
/html flex弹性布局强烈推荐
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet hrefstyle.csstitleFlexbox Layout Example/title
/head
bodydiv classcontainerdiv classbox1Box 1/divdiv classbox2Box 2/divdiv classbox3Box 3/div/div
/body
/html/* styles.css */
body {margin: 0;font-family: Arial, sans-serif;
}.container {display: flex; /* 使用 Flexbox 布局 */justify-content: space-between; /* 在主轴上均匀分布元素 */align-items: center; /* 在交叉轴上居中对齐元素 */padding: 20px;
}.box1{background-color: aqua;width: 10%;
}
.box2{background-color:brown;flex: 1;
}.box3{background-color: blue;width: 10%;
}rem媒体查询布局
rem基础
rem(root em)是一个相对单位类似于emem是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如根元素(html)设置font-size12px非根元素设置width:2rem;则换成px表示就是24px。
em相对于父元素的字体大小来说的
rem相对于html元素字体大小来说的
rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。
媒体查询
媒体查询(Media Query)是CSS3新语法。
· 使用media查询可以针对不同的媒体类型定义不同的样式
· media可以针对不同的屏幕尺寸设置不同的样式
· 当重置浏览器大小的过程中页面也会根据浏览器的宽度和高度重新渲染页面
· 目前针对很多苹果手机、Android手机平板等设备都用得到多媒体查询
语法规范
media mediatype and|not|only (media feature) { CSS-Code; }
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title媒体查询案例背景变色/titlestyle/* 1.媒体查询一般按照从大到小或者从小到大的顺序来 *//* 2.小于540px 页面的背景颜色变为蓝色 */media screen and (max-width: 539px) {body {background-color: blue;}}/* 3. 540~970 我们的页面颜色改为绿色 */media screen and (min-width: 540px) and (max-width:969px) {body {background-color: green;}}/* 4. 大于等于970 我们页面的颜色改为红色 */media screen and (min-width: 970px) {body {background-color: pink;}}/* 5. screen 还有and必须带上不能省略 *//* 6. 我们的数字后面必须跟单位 970px 这个px不能省略 *//style
/head
body/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title媒体查询rem案例/titlestyle/* 从小到大顺序 */media screen and (min-width: 320px) {html {font-size: 50px;}}media screen and (min-width: 640px) {html {font-size: 100px;}}div {height: 1rem;font-size: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}/style
/head
bodydiv实例/div
/body
/html响应式布局bootstrap
引用 https://blog.csdn.net/xy_is_fhh/article/details/121662703
