1.发现不少网页的响应式很好,这个是如何实现的。如下效果:
正常PC浏览时:
-
移动端
注:我把代码保存到本地时将meta、js都注释掉了,只保留了一个core.css,显示效果一致,但是没看到具体是如何做到的啊?
2.还有其他方式做适配么?好像看见有流式布局的
希望能举举例子说明
1.发现不少网页的响应式很好,这个是如何实现的。如下效果:
正常PC浏览时:
移动端
注:我把代码保存到本地时将meta、js都注释掉了,只保留了一个core.css,显示效果一致,但是没看到具体是如何做到的啊?
2.还有其他方式做适配么?好像看见有流式布局的
希望能举举例子说明
谢谢楼上大家的答案,但是我删除所有的@media等语句之后发现仍然结果是这样的,后来我想到了
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
所以我尝试加上之后,果然就不对了。这个页面只做了各种尺寸的适配,但是并没有使用viewport...我把下载的源文件,加上上面那行后,一切不出意外的不行了。仔细看了一下原来的代码,整个内容区基本都是px,所以用媒体查询修改了最外面容器的大小好像也没有什么用。然后再看了下PC端页面的效果,拉伸窗口大小发现:到了一定的大小后显示水平滚动条,然后查看代码发现如下代码:
body {
padding-top: 0;
min-width: 1205px;
}
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
这是用到了media query(媒体查询)。好处就是仅仅使用css就可以对不同设备宽度进行适应,缺点就是要针对不同设备宽度,每个宽度范围都要写一套css,代码量大(不过现在的设备宽度适应基本都是用的media query来实现的)。
一个例子
其中的
意思就是在设备屏幕宽度在0~768px的范围时生效的一套css