怎么调整一个html单页面的宽度?

网友解答: 这个问题涉及到了响应式设计的知识了。响应式设计响应式设计需要在<head</head里面添加一条meta标记:<meta name="viewport" c

网友解答:

这个问题涉及到了响应式设计的知识了。

响应式设计

响应式设计需要在<head</head里面添加一条meta标记:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"

在移动端的宽度要满屏显示,那么这个html的内容宽设置为width:100%;在PC端的时候,小屏幕还好点,但是现在的电脑屏幕都基本上在1440px甚至1920px的宽度,如果还是100%就有点不美观。那么就用到了媒体查询技术了。

媒体查询:

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

如果你界定宽度为1000px的时候开始使用内容宽度为1000px,那么写法就是

.box{width:100%}

@media screen and (min-width1000px){

.box{

width:1000px

}

}

说一下上面的意思,我们写的时候以移动端为主往pc端铺,所以先写的.box就是移动端的宽度,然后使用媒体查询在写大于1000px的时候.box的宽度就是1000px了。不知道回答是否是你所有需要的!有问题在私信!

网友解答:

一般都是由css完成的,如<body style="width:1000px; margin:0 auto;"或者body{ width:1000px;margin:0 auto;}不过最好在body里面放div设置宽度,不要直接设置body

标签: