网站开发时app打开很慢,公司网站维护建设费入什么科目,wordpress mysql类,微信做自己网站文章目录 一、是什么二、实现方式媒体查询百分比vw/vhrem小结 三、总结参考文献 一、是什么
响应式网站设计#xff08;Responsive Web design#xff09;是一种网络页面设计布局#xff0c;页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)… 文章目录 一、是什么二、实现方式媒体查询百分比vw/vhrem小结 三、总结参考文献 一、是什么
响应式网站设计Responsive Web design是一种网络页面设计布局页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
描述响应式界面最著名的一句话就是“Content is like water”
大白话便是“如果将屏幕看作容器那么内容就像水一样”
响应式网站常见特点
同时适配PC 平板 手机等标签导航在接近手持终端设备时改变为经典的抽屉式导航网站的布局会根据视口来调整模块的大小和位置 二、实现方式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理为了处理移动端页面头部必须有meta声明viewport
meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno”属性对应如下
widthdevice-width: 是自适应手机屏幕的尺寸宽度maximum-scale:是缩放比例的最大值inital-scale:是缩放的初始化user-scalable:是用户的可以缩放的操作
实现响应式布局的方式有如下
媒体查询百分比vw/vhrem
媒体查询
CSS3中的增加了更多的媒体查询就像if条件表达式一样我们可以设置不同类型的媒体条件并根据对应的条件给相应符合条件的媒体调用相对应的样式表
使用Media查询可以针对不同的媒体类型定义不同的样式如
media screen and (max-width: 1920px) { ... }当视口在375px - 600px之间设置特定字体大小18px
media screen (min-width: 375px) and (max-width: 600px) {body {font-size: 18px;}
}通过媒体查询可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局比如我们为不同分辨率的屏幕设置不同的背景图片
比如给小屏幕手机设置2x图为大屏幕手机设置3x图通过媒体查询就能很方便的实现
百分比
通过百分比单位 % 来实现响应式的效果
比如当浏览器的宽度或者高度发生变化时通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化从而实现响应式的效果
height、width属性的百分比依托于父标签的宽高但是其他盒子属性则不完全依赖父元素
子元素的top/left和bottom/right如果设置百分比则相对于直接非static定位(默认定位)的父元素的高度/宽度子元素的padding如果设置百分比不论是垂直方向或者是水平方向都相对于直接父亲元素的width而与父元素的height无关。子元素的margin如果设置成百分比不论是垂直方向还是水平方向都相对于直接父元素的widthborder-radius不一样如果设置border-radius为百分比则是相对于自身的宽度
可以看到每个属性都使用百分比会照成布局的复杂度所以不建议使用百分比来实现响应式
vw/vh
vw表示相对于视图窗口的宽度vh表示相对于视图窗口高度。 任意层级元素在使用vw单位的情况下1vw都等于视图宽度的百分之一
与百分比布局很相似在以前文章提过与%的区别这里就不再展开述说
rem
在以前也讲到rem是相对于根元素html的font-size属性默认情况下浏览器字体大小为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}
}为了更准确监听设备可视窗口变化我们可以在css之前插入script标签内容如下
//动态为根元素设置字体大小
function init () {// 获取屏幕宽度var width document.documentElement.clientWidth// 设置根元素字体大小。此时为宽的10等分document.documentElement.style.fontSize width / 10 px
}//首次加载应用设置一次
init()
// 监听手机旋转的事件的时机重新设置
window.addEventListener(orientationchange, init)
// 监听手机窗口变化重新设置
window.addEventListener(resize, init)无论设备可视窗口如何变化始终设置rem为width的1/10实现了百分比布局
除此之外我们还可以利用主流UI框架如element ui、antd提供的栅格布局实现响应式
小结
响应式设计实现通常会从以下几方面思考
弹性盒子包括图片、表格、视频和媒体查询等技术使用百分比布局创建流式布局的弹性UI同时使用媒体查询限制元素的尺寸和内容变更范围使用相对单位使得内容自适应调节选择断点针对不同断点实现不同布局和内容展示 三、总结
响应式布局优点可以看到
面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题
缺点
仅适用布局、信息、框架并不复杂的部门类型网站兼容各种设备工作量大效率低下代码累赘会出现隐藏无用的元素加载时间加长其实这是一种折中性质的设计解决方案多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构会出现用户混淆的情况 参考文献
https://baike.baidu.com/item/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1https://juejin.cn/post/6844904082751111176https://vue3js.cn/interview 希望本文能够对您有所帮助如果您有任何问题或建议请随时在评论区留言联系 章挨踢章IT 谢谢阅读
