当屏幕小时会出现滚动条,可我不想有横向滚动条,也不想裁剪内容
之后利用css媒体查询创建响应式。可效果还是不如意
本人知识不多,请各位讲解详细一点,先谢谢了!~~~
*{
width:100%
}
怎么看都觉得不对
如果自己感觉对页面的控制能力不好,就不要做响应式
http://tongji.baidu.com/data/screen 这是baidu 的统计的分辨率使用情况。
给页面定一个固定宽度,里面元素固定写死宽度。
少用媒体查询,那玩意越弄越累。只在少数情况下定制一下就好。
--------------------
如果要做响应式,页面最大的容器,根据媒体查询定几个宽度
然后嵌套每行的容器,宽100%
行容器再嵌套小区块容器,每个容器指定像素宽度 float:left。当前浏览器的分辨率较小时,会把这些小区块“挤”成纵向排列的。分辨率较大时,小区块会横向排列。
如果不用像素限制小区块宽度的话,也可以3个小区块都是33%的宽度。指定百分比宽度。
如果自己感觉对页面的控制能力不好,就不要做响应式
http://tongji.baidu.com/data/screen 这是baidu 的统计的分辨率使用情况。
给页面定一个固定宽度,里面元素固定写死宽度。
少用媒体查询,那玩意越弄越累。只在少数情况下定制一下就好。
--------------------
如果要做响应式,页面最大的容器,根据媒体查询定几个宽度
然后嵌套每行的容器,宽100%
行容器再嵌套小区块容器,每个容器指定像素宽度 float:left。当前浏览器的分辨率较小时,会把这些小区块“挤”成纵向排列的。分辨率较大时,小区块会横向排列。
如果不用像素限制小区块宽度的话,也可以3个小区块都是33%的宽度。指定百分比宽度。
1366x768看有横向滚动条,就是容器里面的小区快之和,超过了1366,把页面总宽度给撑出了滚动条。检查一下。
不过建议最好老老实实仿照下列大站的做法,定个1000或者1190的宽度。别在乎侧边是不是露白太多。
或者仿淘宝的做法。
我当前分辨率:1920x1080,看下列网站:
baidu新闻 984px
sina新闻 1000px
sohu 1040px
sina微博 1000px
凤凰网 1000px
taobao 1190px 。其中淘宝当分辨率切成1024x768后,看taobao 是有媒体查询,宽度990px
另外还有amazon的做法,最小1000px,最大1500px
#pageContent {max-width: 1500px;min-width: 1000px; margin: auto; overflow: hidden}
越是大站,分辨率就必须至少支持1024x968这个尺寸,不是超大型站点,一般根据用户群的特点,可能做到1190px
个个健议你看一下bootstarp的做法,或者是一些大站,你这种做法很奇葩!!还有个人感觉你多看点基础!
@media only screen and (max-width:1200px){ #topbanner { width:1200px; } }