说真的啊,现在做响应式设计,都不用你说这种限制分辨率的了。建议使用bootstrap框架来进行专业的响应式设计或在手机端采用百分比的设计更好适合响应需求。这里青锋建站先解决你的这个问题:
解决这个问题需要根据不同的分辨率来设置不同的宽度,先给<body >body标签添加一个my-width类。然后针对这个类来设计样式,在不同的分辨率下来规定这个宽度。具体代码如下:
@media only screen and (min-width:1700px)//表示屏幕像素宽度大于1700PX时宽度为1600PX
{
.my-width {width:1600px;}
}
@media only screen and (max-width:1600px) and (min-width:1200px)//宽度在1200-1600之间是设置宽度为1180px
{
.my-width {width:1180px;}
}
@media only screen and (max-width:1200px) and (min-width:800px)//宽度在800-1200之间是设置宽度为800px
{
.my-width {width:800px;}
}
这里给你一个思路,可以再把宽度进行细分,但是内部的块元素也需要在不同分辨率下添加自定义宽度,建议使用专业的响应式设计框架或在PC端使用像素,在手机端平板使用百分比。如果觉得青锋建站说得好,给个赞,顺便关注一下。
- 相关评论
- 我要评论
-