哪里有做网站的教程,四川成都最新新闻事件今天,wordpress 图片管理,政务网站集约化建设难点与建议响应式布局 1 什么是响应式布局2 响应式布局的5种实现方案2.1 百分比布局2.2 媒体查询布局2.3 rem响应式布局2.4 vw / vh响应式布局2.5 flex弹性布局 1 什么是响应式布局
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互… 响应式布局 1 什么是响应式布局2 响应式布局的5种实现方案2.1 百分比布局2.2 媒体查询布局2.3 rem响应式布局2.4 vw / vh响应式布局2.5 flex弹性布局 1 什么是响应式布局
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局的四个层次 1 同一页面在不同大小和比例之下看起来都应该是舒适的 2 同一页面在不同分辨率下看起来都应该是合理的 3 同一页面在不同操作方式(如鼠标和触屏)下体验应该是统一的 4 同一页面在不同类型的设备(手机、平板、电脑)上交互方式应该是符合习惯的。响应式布局基本规则 1 可伸缩的内容区块内容区块在一定程度上能够自动调整以确保填满整个页面。 2 可自由排布的内容区块当页面尺寸变动较大时能够减少或增加排布的列数。 3 适应页面尺寸的边距当页面尺寸发生更大变化时区块的边距也应该变化。 4 能够适应比例变化的图片对于常见的宽度调整图片在隐去两侧部分时依旧保持美观可用。 5 能够自动隐藏或部分显示的内容如在电脑上显示的大段描述文本在手机上就只能少量显示或全部隐藏。 6 能自动折叠的导航和菜单不管是展开还是收起应该根据页面尺寸来判断。 响应式布局优点 1 面对不同分辨率设备灵活性强 2 能够快捷解决多设备显示适应问题。响应式布局缺点 1 兼容各种设备工作量大效率低下 2 代码累赘会出现隐藏无用的元素加载时间加长 3 一种折中性质的设计解决方案多方面因素影响而达不到最佳效果 4 一定程度上改变了网站原有的布局结构会出现用户混淆的情况。
2 响应式布局的5种实现方案
2.1 百分比布局
通过百分比单位 % 来实现响应式的效果比如当浏览器的宽度或者高度发生变化时通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化从而实现响应式的效果。heightwidth属性的百分比依托于父标签的宽高。但是padding、border、margin等属性的情况又不一样。 1 子元素的top/left和bottom/right如果设置百分比则相对于直接非static定位(默认定位)的父元素的高度/宽度。 2 子元素的padding如果设置百分比不论是垂直方向或者是水平方向都相对于直接父亲元素的width而与父元素的height无关。 3 子元素的margin如果设置成百分比不论是垂直方向还是水平方向都相对于直接父元素的width。border-radius不一样如果设置border-radius为百分比则是相对于自身的宽度缺点 1 计算困难如果我们要定义一个元素的宽度和高度按照设计稿必须换算成百分比单位。 2 各个属性中如果使用百分比相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等造成我们使用百分比单位容易使布局问题变得复杂。
2.2 媒体查询布局
通过media媒体查询可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。缺点如果浏览器大小改变时需要改变的样式太多那么多套样式代码会很繁琐。步骤一 设置meta标签首先我们需要设置 meta 标签来告诉浏览器让视口网页的可视区域的宽度等于设备的宽度并禁止用户对页面的缩放如下所示 meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno 在设置视口时需要注意视口就是网页可见区域的尺寸设置视口时只设置宽度就行不用在乎高度具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下 1 viewport即视口表示网页的可视区域 2 width控制 viewport 的大小可以指定一个具体的值例如 600也可以是由关键字组成的特殊值例如 device-width 就表示设备的宽度 3 initial-scale表示初始缩放比例也就是页面第一次加载时的缩放比例 4 maximum-scale表示允许用户缩放的最大比例范围从 0 到 10.0 5 minimum-scale表示允许用户缩放到最小比例范围从 0 到 10.0 6 user-scalable表示用户是否可以手动缩放“yes”表示允许缩放“no”表示禁止缩放。媒体查询的语法规范:
media mediatype and|not|only (media feature) {CSS-Code;
}
/* 用 media 开头注意符号 */
/* mediatype 媒体类型*/
/* 关键字and not only */
/* media feature 媒体特性 必须有小括号包含 */1 mediatype 查询类型 2 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。① and:可以将多个媒体特性连接到一起相当于“且”的意思。② not:排除某个媒体类型相当于“非”的意思可以省略。③ only:指定某个特定的媒体类型可以省略。 3 媒体类型的展示风格每种媒体类型都具体各自不同的特性根据不同类型的媒体特性设置不同的展示风格暂且了解以下三个。注意他们要包含在小括号内。
步骤二 媒体查询有以下三种实现方式 1 直接在 CSS 文件中使用示例代码如下
media (max-width: 320px) {/*0~320*/body {background: pink;}
}
media (min-width: 321px) and (max-width: 375px) {/*321~768*/body {background: red;}
}
media (min-width: 376px) and (max-width: 425px) {/*376~425*/body {background: yellow;}
}
media (min-width: 426px) and (max-width: 768px) {/*426~768*/body {background: blue;}
}
media (min-width: 769px) {/*769~∞*/body {background: green;}
}2 使用 import 导入示例代码如下
import index01.css screen and (max-width:1024px) and (min-width:720px)import index02.css screen and (max-width:720px)3 在 link 标签中使用示例代码如下
link relstylesheet typetext/css hrefindex01.css mediascreen and (max-width:1024px) and (min-width:720px)/link relstylesheet typetext/css hrefindex02.css mediascreen and (max-width:720px)/在实际开发中常用的响应断点阈值设定(括号后面是样式的缩写) 在实际开发中常用的两种适配方案 1 移动端到PC端适配原则(min-width从小到大) 2 PC端到移动端适配原则(max-width从大到小) 在实际开发时media会结合栅格系统一起来使用实现真正意义上的响应式开发。 1 超小屏幕手机小于768px 2 小屏幕平板大于等于768px 3 中等屏幕桌面显示器大于等于992px 4 超大屏幕大桌面显示器大于等于1200px
2.3 rem响应式布局
rem布局就是让一些不能等比自适应的元素达到当设备尺寸发生改变的时候等比例适配当前设备。我们可以通过使用媒体查询根据不同设备按比例设置html的字体大小然后页面元素使用rem做尺寸单位当html字体大小变化元素尺寸也会发生变化从而达到等比例缩放的适配。remroot em是一个相对单位类似于emem是父元素字体大小。他和em不同的是rem的基准是相对于html元素的字体大小。比如根元素html设置font-size12px非根元素设置width2rem换成px表示就是24px。在这里rem有一个优势父元素文字大小可能不一致但是整个网页只有一个html可以很好来控制整个页面的元素大小。因此我们可以使用rem来布局我们的页面这就是rem布局的方式。
2.4 vw / vh响应式布局
vw表示相对于视图窗口的宽度vh表示相对于视图窗口高度。视图窗宽度100vw视图窗高度100vh任意层级元素在使用vw单位的情况下1vw都等于视图宽度的百分之一与百分比布局很相似。如果移动端有5个不同的视口宽尺寸750640480375320则在不同尺寸下对应的1vw的px值如下表
2.5 flex弹性布局
