南京网站建设网,南京建站服务,wordpress查看自己的评论,网站建设350元响应式布局的五种方法1.百分比布局2.rem布局3. 媒体查询 media screen4. flex布局5.vw 和 vh响应式布局是同一页面在不同的屏幕上有不同的布局#xff0c;即只需要一套代码使页面适应不同的屏幕。 1.百分比布局 1.有父元素就相对于父元素 2.没有父元素就相对于视口的大小 举一…
响应式布局的五种方法1.百分比布局2.rem布局3. 媒体查询 media screen4. flex布局5.vw 和 vh响应式布局是同一页面在不同的屏幕上有不同的布局即只需要一套代码使页面适应不同的屏幕。 1.百分比布局 1.有父元素就相对于父元素 2.没有父元素就相对于视口的大小 举一个例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;}.box2{width: 80%;height: 100px;background: red;}.box{width: 50%;height: 100px;background: yellow;}.box1{width: 50%;height: 50%;background: blue;}/style
/head
bodydiv classboxdiv classbox1/div/divdiv classbox2/div
/body
/html2.rem布局 remfont size of the root element是指相对于根元素的字体大小的单位rem只是一个相对单位 rem和em的对比
rem和em都是相对单位rem相对于根元素em相对于父元素
例如
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title %和rem 布局/titlestylehtml {font-size: 30px;}.box {font-size: 10px;}.box2 {width: 10rem;height: 10rem;background-color: plum;}.box {width: 10em;height: 10em;background-color: aquamarine;}/style
/headbodydiv classboxdiv classbox1/div/divdiv classbox2/div
/body/html3. 媒体查询 media screen
例如
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlemedia screen/titlestyle.box {width: 10rem;height: 10rem;background-color: pink;margin-left: 20rem;}/* 如果屏幕的宽大于1200px它执行此css */media screen and (min-width: 1200px) {html {font-size: 20px;}}/* 如果屏幕的宽小于1200px它执行此css */media screen and (max-width: 1200px) {html {font-size: 10px;}}/style
/headbodydiv classbox/div
/body/html4. flex布局
5.vw 和 vh vw表示相对于视图窗口的宽度vh表示相对于视图窗口高度除了vw和vh外还有vmin和vmax两个相关的单位。各个单位具体的含义如下 例如
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;}.box{width: 100vw;height: 100vh;background: red;}.box1{width: 50vw;height: 50vh;background: blue;}/style
/head
bodydiv classboxdiv classbox1/div/div
/body
/html
