响应式页面简介
响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。完整的响应式网站的实现其实需要考虑到以下这些问题:响应式布局、响应式html和css、响应式媒体、响应式javascript。
方法
响应式布局
(1)设置viewport元标签
<meta name="viewport"
content="width=device-width,
initial-scale=1.0, user-scalable=no">
使用 viewport标签在手机浏览器上控制布局控制不缩放等通用定义。
(2避免使用绝对单位(px),用相对单位代替(%、auto、em等)
(3)使用流式定位:float
(4)图片大小实现自适应:
img {max-width: 100%;}
会随着容器的改变而改变,且不会超过图片自身原始大小,防止失真。
(5)根据浏览器屏幕的特征,有选择性的执行某些CSS样式——CSS3媒体查询技术(Media Query)
为不同尺寸的屏幕设置不同的 CSS 样式
属性名 | 作用 |
---|---|
width、height | 浏览器可视宽度、高度 |
device-width | 设备屏幕的宽度 |
device-height | 设备屏幕的高度 |
/* 屏幕小于 300 px */
@media screen and (max-width: 300px) {
div {
background-color:red;
}
}
/* 屏幕大于 300 px */
@media screen and (min-width: 300px) {
div {
background-color:yellow;
}
}
/* 屏幕小于 300px 大于 200px */
@media screen and (min-width: 200px) and (max-width: 300px){
div {
background-color:blue;
}
}
响应式html和css
方法思路一:使用相同html结构,对于要在移动端要隐藏的dom元素,可以通过display: none来控制html是否显示;
方法思路二:动态使用js渲染不同内容,但是这样会增加移动端js大小,而且css样式文件必不可少。
相比之下,我们使用了思路一的方案。其实使用js的渲染方案也是可以的,不过毕竟保留html比使用js简单。
响应式javascript
真正的响应式设计的网站,处理使用不同的布局、html、css和图片,还需要根据浏览器环境来异步加载不同的js文件。主要通过设备环境判断来异步加载不同的javascript。
if(isMobile){
require.async(['zepto', './mobileMain'], function($, main){
main.init();
});
}else{
require.async(['jquery', './main'], function($, main){
main.init();
});
}
参考:
web前端响应式设计总结:https://blog.csdn.net/pupilxiaoming/article/details/77703805
前端实现响应式布局的几种方法:https://blog.csdn.net/DDDHL_/article/details/123603557