北京住房与建设部网站首页,开个捕鱼网站怎么做,重庆市城市建设档案馆官方网站,wordpress商城插件收费一. 什么是响应式
响应式网站设计是一种网络页面设计布局。页面的设计与开发应当根据用户行为以及设备环境#xff08;系统平台#xff0c;屏幕尺寸#xff0c;屏幕定向等#xff09;进行相应的响应和调整。
响应式网站常见特点#xff1a;
1. 同时适配PC平板手机。
2…一. 什么是响应式
响应式网站设计是一种网络页面设计布局。页面的设计与开发应当根据用户行为以及设备环境系统平台屏幕尺寸屏幕定向等进行相应的响应和调整。
响应式网站常见特点
1. 同时适配PC平板手机。
2. 标签导航在接近手持终端设备时改变为经典的抽屉式导航。
3. 网站的布局会根据视口来调整模块的大小和位置。 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。为了处理移动端页面头部必须有meta声明viewport。
meta nameviewport contentwidthdevice-width,initial-scale1,maximum-scale1,user-scalableno widthdevice-width: 是自适应手机屏幕的尺寸宽度 maximum-scale: 是缩放比例的最大值 inital-scale: 是缩放的初始化 user-scalable: 是用户的可以缩放的操作 二. 实现响应式布局的方式
1. 媒体查询
2. 百分比
3. vw/vh
4. rem
1. 媒体查询
CSS3中增加了更多的媒体查询就像if条件表达式一样我们可以设置不同类型的媒体查询并根据对应的条件给相应符合条件的媒体调用相对应的样式表。 使用media查询为不同尺寸的屏幕设定不同的CSS样式 media screen and (max-width:1920px){...}style
#div0{width: 150px;height: 200px;
}
// 视口的宽度改变
media screen and (min-device-width:100px) and (max-device-width:300px){#div0{background-color: red;}
}media screen and (min-device-width:301px) and (max-device-width:500px){#div0{background-color: blue;}
}
/stylemedia常用参数 属性名称作用widthheight浏览器可视宽度高度device-width设备屏幕的宽度device-height设备屏幕的宽度
style
div{width: 200px;height:200px;
}
// 浏览器的宽度改变
media screen and (min-width:500px) and (max-width:700px){div{background-color: red;}
}media screen and (min-width:701px){div{background-color: blue;}
}
/style 例子 style#div0 {width: 100%;height: 500px;}#div0 div {float: left;height: 100px;}/* 1行三个div */media screen and (min-device-width:400px){#div0 div {width: 33.3%;}#div0 div:nth-child(1) {background-color: red;}#div0 div:nth-child(2) {background-color: blue;}#div0 div:nth-child(3) {background-color: green;}}/* 2行三个div */media screen and (min-device-width:300px) and (max-device-width:399px) {#div0 div {width: 50%;}#div0 div:nth-child(1) {background-color: red;}#div0 div:nth-child(2) {background-color: blue;}#div0 div:nth-child(3) {background-color: green;}}/* 3行三个div */media screen and (min-device-width:200px) and (max-device-width:299px) {#div0 div {width: 100%;}#div0 div:nth-child(1) {background-color: red;}#div0 div:nth-child(2) {background-color: blue;}#div0 div:nth-child(3) {background-color: green;}}
/style
bodydiv iddiv0div/divdiv/divdiv/div/div
/body 媒体查询——其他引入方式1 style#div0 {width: 100%;height: 500px;}#div0 div {float: left;height: 100px;}#div0 div:nth-child(1) {background-color: red;}#div0 div:nth-child(2) {background-color: blue;}#div0 div:nth-child(3) {background-color: green;}
/style
style media(min-device-width:300px) and (max-device-width:399px)#div0 div {width: 50%;}
/style
style media(min-device-width:400px) and (max-device-width:499px)#div0 div {width: 33.33%;}
/style 媒体查询其他引入方式——2link引入 // 写在Link标签中有条件的引入外部样式表
link hrefcss/test.css relstylesheet
link hrefcss/css-1.css relstylesheet media(min-device-width:100px) and (max-device-width:300px)
2. 百分比
通过百分比单位%来实现响应式的效果。
比如当浏览器的宽度或者高度发送变化时通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化从而实现响应式的效果。
heightwidth属性的百分比依托于父标签的宽高但是其他盒子属性则不完全依赖父元素。
3. vw/vh
vw表示相对于视图窗口的宽度vh表示相对于视图窗口的高度。
任意层级元素在使用vw单位的情况下1vw都等于视图宽度的百分之一。
4. rem rem是指相对于根元素的字体大小的单位。 默认情况下浏览器字体大小为16px。此时1rem 16px 可以针对不同的设备分辨率改变font-size的值。 media screen and (max-width: 414px) {html{font-size: 18px}
}media screen and (max-width: 375px) {html{font-size: 16px}
}media screen and (max-width: 320px) {html{font-size: 12px}
}
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescriptlet c () {let w document.documentElement.clientWidth // 获取设备的宽度let n (20 * (w / 320) 40 ? 40 px : 20 * (w / 320) px) // 根字体大小document.documentElement.style.fontSize n}window.addEventListener(load, c)window.addEventListener(resize, c)/scriptstylehtml {font-size: 16px; // 页面一加载这里就会被重置替代}div {font-size: 1rem;}/style/headbodydiv123/div/body
/html
5. flex
FlexiableBox即是弹性盒子用来进行弹性布局可以配合rem处理尺寸的适配问题。
flex用来为盒状模型提供最大的灵活性任何一个容器都可以指定为Flex布局。 flex-direction子元素在父元素盒子中的排列方式 属性值作用row默认值。按从左到右的顺序显示row-reverse与row相同但是以相反的顺序column灵活的将项目垂直显示按从上到下的顺序column-reverse与column相同但是以相反的顺序 flex-wrap子元素在父元素盒子中的是否换行 属性值作用nowrap默认值不换行或不换列wrap换行或换列wrap-reverse换行或换列但以相反的顺序 flex-flowflex-direction和flex-wrap属性的简写形式。语法flex:flex-direction||flex-wrap justify-content用来在存在剩余空间时设置为间距的方式 属性值作用flex-start默认值从左到右挨着行的开头flex-end从右到左挨着行的结尾center居中显示space-between平均分布在该行上两边不留间隔空间space-around平均分布在该行上两边留有一半的间隔空间 align-items设置每个flex元素在交叉轴上的默认对齐方式单行看待 属性值作用flex-start位于容器的开头flex-end位于容器的结尾center居中显示 align-content设置每个flex元素在交叉轴上的默认对齐方式整体看待 属性值作用flex-start位于容器的开头flex-end位于容器的结尾center位于容器的中心space-between之间留有空白space-around 两端都留有空白 其他属性 属性值作用flex-basis设置弹性盒伸缩基准值设置后宽度将不再生效flex-grow设置弹性盒子的扩展比率flex-shrink设置弹性盒子的缩小比率flexflex-growflex-shrinkflex-basis的缩写 特殊写法 属性作用flex:autoflex: 1 1 autoflex: noneflex: 0 0 auto flex: 0% flex:100px flex: 1 1 0% flex: 1 1 100px flex:1flex: 1 1 0%
