查看页面，怎么把p/c端改成手机端适应的页面，字体

qq_40236920 2017-09-15 01:56:43

把p/c端换成移动端这个页面怎么样把字体更改大小显示的跟电脑屏幕上的字体一样大

...全文

438 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_40236920 2017-09-18

打赏
举报

引用 9 楼 sp1234 的回复:

默认情况下，两个方面你都要做。第一就是设置 meta，让手机页面不要随便缩放、要采用中分辨率。第二就是选择一个稍微小一点点、清晰好看的字体。

引用 11 楼 andy0618 的回复:

还可以用bootstrap

可以百度一下

bootstrap 是可以使网页在手机和PC中都适应的

嗯嗯，刚刚搜了下，看了，

一个分辨率小的字体不完全显示出来，这是？？？？

andy0618 2017-09-18

打赏
举报

还可以用bootstrap 可以百度一下 bootstrap 是可以使网页在手机和PC中都适应的

qq_40236920 2017-09-17

打赏
举报

引用 8 楼 sp1234 的回复:

实际上 width=device-width, initial-scale=1.0 就是保证字体大小适中。你可以在页面上使用小一点的 font-size，这样 pc 页面和手机界面上的字都会同时小一点。

我写的，加入点击查看页面的时候都会自动变小，从数据库中读出的来，那个字体怎么改，直接改css样式？直接改scc样式应该不可以

以专业开发人员为伍 2017-09-16

打赏
举报

默认情况下，两个方面你都要做。第一就是设置 meta，让手机页面不要随便缩放、要采用中分辨率。第二就是选择一个稍微小一点点、清晰好看的字体。

以专业开发人员为伍 2017-09-16

打赏
举报

实际上 width=device-width, initial-scale=1.0 就是保证字体大小适中。你可以在页面上使用小一点的 font-size，这样 pc 页面和手机界面上的字都会同时小一点。

mirrorspace 2017-09-16

打赏
举报

使用 "媒体查询"能实现你的要求原理是它可以判断"浏览器"大小来加载不同的CSS样式表所以为PC端和手机端各写一份CSS <link href="mobile.css" media="only screen and (min-width:200px) and (max-width:760px)" rel="stylesheet" /> <link href="desktop.css" media="only screen and (min-width:767px) and (max-width:1920px)" rel="stylesheet" />

qq_40236920 2017-09-15

打赏
举报

引用 4 楼 hanjun0612 的回复:

你把这个放到html页面，运行起来后，拖动窗口放大和缩小。会发现背景色改变。这个例子就是告诉你，如果用户打开浏览器，发现是 700px 视口会显示一个样式。如果是480px 视口会显示另一个样式。其他的视口，还会是一个样式。所以显示在浏览器和显示在手机会不一样。


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Demo: Responsive Design in 3 Steps</title>

<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<style type="text/css">

/* for 700px or less */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}
    body {
    background-color:red;
    }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}
    body {
    background-color:blue;
    }

}

/* border & guideline (you can ignore these) */
#content {
	background: #f8f8f8;
}
#sidebar {
	background: #f0efef;
}
#header, #content, #sidebar {
	margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
	border: solid 1px #ccc;
}

</style>
</head>

<body>

<div id="pagewrap">

	<div id="header">
		<h1>Header</h1>
		<p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>
	</div>

	<div id="content">
		<h2>Content</h2>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
	</div>

	<div id="sidebar">
		<h3>Sidebar</h3>
		<p>text</p>
		<p>text</p>
	</div>
	
	<div id="footer">
		<h4>Footer</h4>
	</div>

</div>

</body>
</html>

好的我试试，感谢，好像得使用bootstarp,和jquery mobile,那个bootstarp引用的css是方案里面本身带的，还是需要下载这个文件

lovebaby 2017-09-15

打赏
举报

推荐一本书《响应式web设计》，很适合你，不贵，网上也能找到这本书的高清电子版，真想学还是建议买来看。

正怒月神版主 2017-09-15

打赏
举报


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Demo: Responsive Design in 3 Steps</title>

<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<style type="text/css">

/* for 700px or less */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}
    body {
    background-color:red;
    }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}
    body {
    background-color:blue;
    }

}

/* border & guideline (you can ignore these) */
#content {
	background: #f8f8f8;
}
#sidebar {
	background: #f0efef;
}
#header, #content, #sidebar {
	margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
	border: solid 1px #ccc;
}

</style>
</head>

<body>

<div id="pagewrap">

	<div id="header">
		<h1>Header</h1>
		<p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>
	</div>

	<div id="content">
		<h2>Content</h2>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
	</div>

	<div id="sidebar">
		<h3>Sidebar</h3>
		<p>text</p>
		<p>text</p>
	</div>
	
	<div id="footer">
		<h4>Footer</h4>
	</div>

</div>

</body>
</html>

qq_40236920 2017-09-15