高端网站设计简介,遂溪手机网站建设,外贸公司介绍,wordpress模板建站教程目录
一、是什么
二、怎么实现
1、媒体查询
2、百分比
3、vw/vh
4、小结
三、总结 一、是什么 响应式设计简而言之#xff0c;就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 响应式网站常见特点#xff1a; 同时适配PC 平板 手机等…目录
一、是什么
二、怎么实现
1、媒体查询
2、百分比
3、vw/vh
4、小结
三、总结 一、是什么 响应式设计简而言之就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
· 响应式网站常见特点 同时适配PC 平板 手机等 标签导航在接近手持终端设备时改变为经典的抽屉式导航 网站的布局会根据视口来调整模块的大小和位置 二、怎么实现 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。为了适应屏幕多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。 可以使用 meta 标签的 viewport 属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度并且忽视初始的宽度设置。这段代码写在 head里面。
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno viewport:即视图窗口表示网页的可是区域 widthdevice-width: 是自适应手机屏幕的尺寸宽度 inital-scale:是缩放的初始化也就是页面第一次加载时的缩放比例 maximum-scale:是缩放比例的最大值范围从0.0~10.0 user-scalable:是用户的可以缩放的操作“yes”表示允许缩放“no”表示禁止缩放。
实现响应式布局的方式有如下
媒体查询百分比vw/vhrem
1、媒体查询 CSS3中的增加了更多的媒体查询就像if条件表达式一样我们可以设置不同类型的媒体条件并根据对应的条件给相应符合条件的媒体调用相对应的样式表使用Media查询可以针对不同的媒体类型定义不同的样式语法如下
media mediatype and|not|only (media feature) { CSS-Code;}
media screen and (max-width: 1920px) { ... }当视口宽度小于1920px样式发生......改变
media screen (min-width: 400px) and (max-width: 600px) {body {font-size: 40px;}
}
(当视口宽度在大于等于400px并且小于等于600px字体大小变为40px)
通过媒体查询可以通过给不同分辨率的设备编写不同的样式来实现响应式布局
2、百分比 当浏览器的宽度或者高度发生变化时可以通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化从而实现响应式的效果。 但是每个属性都使用百分比会照成布局的复杂度所以不建议使用百分比来实现响应式。
3、vw/vh vw表示相对于视图窗口的宽度vh表示相对于视图窗口高度。 任意层级元素在使用vw单位的情况下1vw都等于视图宽度的百分之一。 但是每个属性都使用vh/vw会照成布局的复杂度所以不建议使用vh/vw来实现响应式。
4、小结
响应式设计实现通常会从以下几方面思考
弹性盒子包括图片、表格、视频和媒体查询等技术使用百分比布局创建流式布局的弹性UI同时使用媒体查询限制元素的尺寸和内容变更范围使用相对单位使得内容自适应调节选择断点针对不同断点实现不同布局和内容展示
三、总结
优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题
缺点
兼容各种设备工作量大效率低下代码累赘会出现隐藏无用的元素加载时间加长其实这是一种折中性质的设计解决方案多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构会出现用户混淆的情况
