61,112
社区成员
发帖
与我相关
我的任务
分享html 页面不随手机端缩小
html中做好页面后，用手机端查看，为什么页面的布局不随着屏幕尺寸缩小而缩小，会变成这样
怎么才能做成原来的样式，保持布局不变，如下图
怎么才能做成原来的样式，保持布局不变，如下图
...全文
请发表友善的回复…
发表回复
禅思院 2019-12-30
- 打赏
- 举报
如果自适应的 建议 px换% 字体换rem 或者其他得单位
zhangyhc 2019-05-12
- 打赏
- 举报
单位用rem
禅思院 2019-04-29
- 打赏
- 举报
你的title设置了样式1000px， 改为100%
.玄之又玄. 2019-04-23
- 打赏
- 举报
可以写个方法，获取到当前设备屏幕的尺寸，在进行设置
衍乾 2019-04-23
- 打赏
- 举报
有专门面向手机端的开发语言
槿畔 2019-04-23
- 打赏
- 举报
不要用px单位，他不会自适应的，常规做法是百分比和rem适配。你可以搜索一下
ぃ 白龙 丶 2019-04-23
- 打赏
- 举报
字体缩小的问题，可以使用rem这个单位。需要有个rem.js的换算文件，你可以再网上找一下有没有
ぃ 白龙 丶 2019-04-23
- 打赏
- 举报
一种是百分比布局，一种是用响应式的媒体查询。建以看一下bootstrap的文档。
Ivan艾凡 2019-04-22
- 打赏
- 举报
你把title里面的 宽度写成 width:100%; max-width:1000px; 这样试试
努力，加油，奋斗 2019-04-19
- 打赏
- 举报
<!DOCTYPE>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
font-size: 16px;
position: relative;
}
.top{
height:100px;
background-color:#ccc;
}
.title{
width:70%;
background-color:#e8e8e8;
margin:0 auto;
}
</style>
</head>
<body>
<div class="top">
<div class="title">
<h1 class="message">这是一段内容</h1>
</div>
</div>
</body>
</html>
这样就可以了，你试试
黎陌Figure 2019-04-19
- 打赏
- 举报
四楼写的用过，但字体无法缩小。另外按照网上教程，宽度设成像素也可以缩放，不知道哪里少了些什么
自渡96 2019-04-18
- 打赏
- 举报
你的title设置了样式1000px
usecf 2019-04-18
- 打赏
- 举报
你用100%就可以适应了
黎陌Figure 2019-04-18
- 打赏
- 举报
代码如下：
<!DOCTYPE>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
font-size: 16px;
position: relative;
}
.top{
height:100px;
background-color:#ccc;
}
.title{
width:1000px;
background-color:#e8e8e8;
margin:0 auto;
}
</style>
</head>
<body>
<div class="top">
<div class="title">
<h1 class="message">这是一段内容</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
font-size: 16px;
position: relative;
}
.top{
height:100px;
background-color:#ccc;
}
.title{
width:1000px;
background-color:#e8e8e8;
margin:0 auto;
}
</style>
</head>
<body>
<div class="top">
<div class="title">
<h1 class="message">这是一段内容</h1>
</div>
</div>
</body>
</html>
