1什么是响应式网站?
我刚进公司,项目经理给了我一个页面让我做
我看到第一个要求就头大了,什么是bootstrap?? 不知道,什么是响应式支持???不知道,到是最后一个css与js与页面分离,
项目经理问我什么都不知道,感觉挺担心的,会不会因为这个把我踢了,呵呵,不过运气很好,项目经理只是让我把这方面的知识补补,
有问题怎么办?? 百度一下,这是我第一想到的,然后就去查了,
bootstrap : 前端框架,一些做好的效果,里面的各种插件非常好,可以直接拿来用
我就去bootstrap中文网下了几个版本,不知道是哪个文件干啥的
就看bootstrap中文网上面的一些解释
进里面看了看
里面有很多解释,现在我也做了一个响应式的页面,大家有机会要指点小弟一把啊
2.响应式
我现在用的是@media获取屏幕宽度,来进行处理,比如要对小于800px把屏幕背景色变为红色
①现在html 里加一个屏幕宽度=设备宽度的说明
<meta name="viewport" content="width=device-width, initial-scale=1">
② 在css样式里面
@media screen and (max-width : 800px){
body{
background : red;
}
}
上面表示小于多少像素的时候进行处理
一种是小于多少像素而且大于多少像素执行处理
@media screen (max-width : 800px) and {min-width: 700px} {
body{
background : red;
}
}
就是通过@media获取屏幕像素,指定小于或大于多少像素的时候处理一些效果或者是布局
这样就可以在不同的设备上通过获取不同设备的屏幕宽度来做相应的处理,达到多个设备不同的显示
效果,达到更加好的用户体验。
还有在做响应式的时候,在最外层的div加一个
width:50%; min-width: 700px;
在屏幕达到缩放的条件是后,会一下子缩放,个人感觉挺好,呵呵
好了作为前端的新人,希望各位前辈多多关照了,本文档属于个人见解,不洗勿喷!!!