HTML CSS代码求助:怎样让大段的文本,同时在手机和电脑浏览器中都以比较合适的字体显示。

如题:一有大段文本,字体大小设置成16px,在电脑上可以看得比较清楚。但是用手机来访问的话,字就非常小个。如果在手机上多点触控来放大页面,页面宽度又会大过手机屏幕,需要不停地左右移动才能读完一行文字。怎样写代码,可以让手机和电脑上看起来都比较OK。手机就以苹果640px宽度为例,电脑以主流笔记本1280宽度为例。非常感谢。

还发现一个问题,就算用一个限制宽度的BOX把文本装起来,在手机上显示的换行位置跟电脑上也不相同。手机上一行的字数显示的比电脑上少。这个用什么语句可以控制吗?手机上一行显示的文字再少一点,字体是不是就能变大些了。
再补充一个问题:有没有可能在手机上进行多点缩放的时候,不是放大整个页面,而是放大文字?让文字始终以屏幕边界,或是限定的像素宽度自动换行?这样就不用左右拖动页面来看了。

你的问题应该是:为电脑开发的网页在手机上看起来就整体变小了,需要放大和拖动才能浏览是吧?
解决方案:在你的页面中加入:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />,viewport概念最初由苹果提出,并应用到Safari浏览器中,现在基本上所有的手机浏览器都支持这个属性了。content属性可以设置成多种值,对于你的页面需要如何设置,你可以自己研究一下viewport这个概念。
温馨提示:内容为网友见解,仅供参考
第1个回答  2014-04-12

    css3新增加了尺寸叫rem,这玩意是相对尺寸,手机wk内核的天下,应该是可以放心大胆用的,如果你不是很在乎电脑客户端的话可以试试


    有个老外写了个脚本叫:fittext.js,可以让字号根据容器大写自动变化,和上面rem是一回事,只是这个是js实现的,不像rem那样有浏览器兼容问题


    有个技术叫:css媒体查询,你可以设定很多条件,比如:屏幕宽320px以内,字号18px,行高1.2。屏幕宽320px-1024px,字号16px,行高1.6。


你自己选哪个方法合适,相关知识自行百度。

第2个回答  2014-04-12
如果要针对桌面端和移动端获得一致的用户体验,前段直接用Bootstrap开发即可。

HTML CSS代码求助:怎样让大段的文本,同时在手机和电脑浏览器中都以比...
解决方案:在你的页面中加入:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" \/>,viewport概念最初由苹果提出,并应用到Safari浏览器中,现在基本上所有的手机浏览器都支持这个属性了。content属性可以设置成多种值,对于你的页面需要如何设置,你可以自己研究...

怎样写CSS能让电脑版的网页在手机上展示的时候字体不变小
使用rem,rem是CSS3新增的一个相对单位(root em,根em)。字体大小是根据根元素而变动的,那么在手机上字体大小也会做相应变化。(function (doc, win) { var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () { var ...

html中设置的行距在手机上与电脑上显示不同
这样应该能得到你想要的效果了。maring-top,就是<p>和上面的距离,在这里可以当做段距使用,在这里用padding-top效果一样,你试试就知道了。其实CSS不难学,困难的是一般复杂的效果和浏览器兼容方面的问题,如果你学会基础也会百度自学了。诚意满满,记得选我哈!

在DW中如何改变CSS中的字体大小和颜色?
1、双击打开HBuilder工具,新建一个HTML5静态页面模板。2、在<body><\/body>标签内,插入一个div标签,并设置对应的ID属性和内容。3、在CSS标签内使用ID选择器,设置div标签内的内容文字大小,使用vmin。4、保存代码并直接打开浏览器预览效果,可以发现使用vmin设置的比同值的px的要大。5、将css样式属...

设置文本字体的html代码是
font-style设置字体风格。font-variant以小型大写字体或者正常字体显示文本。font-weight设置字体的粗细。需要准备的材料分别有:电脑、浏览器、html编辑器。首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。在index.html中的div标签中,输入样式代码:style=font-weight:800。html...

html中改变字体颜色的代码怎么写
通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。书写方式 编辑 它其实是文本,它需要浏览器的解释,它的编辑器大体可以分为三种,基本文本、文档编辑软件,...

html常用标签及属性总结(html中常用的标签)
HTML文件的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。 HTML基础-常用标签及语法 HTML注释语法,VScode快捷键【Ctrl+\/】: 标题(Heading),是通过h1-h6六个标签分别来对六个级别的标题进行定义的。标题标签只是给标签内部的元素内容添加对应级别标题的语义...

HTML是什么??
它包括一系列标签,可以统一网络上文档的格式,将分散的互联网资源连接成一个逻辑整体。HTML是由HTML命令组成的描述性文本,可以解释文字、图形、动画、声音、表格、链接等。Html是一种用来描述网页的语言。它被称为超文本标记语言,它是一种标记语言。它包括一系列标签,可以统一网络上文档的格式,将分散...

CSS网页下拉列表大小怎么调整
需要准备的材料分别有:电脑、浏览器、html编辑器。1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的<style>标签中,输入css代码:select { width: 210px;}。3、浏览器运行index.html页面,此时网页下拉列表的大小被调整为了210px。

html所有的块级标签和行级标签有哪些
element) HTML标签分类明细a - 锚点abbr - 缩写acronym - 首字b - 粗体(不推荐)bdo - bidi overridebig - 大字体br - 换行cite - 引用code - 计算机代码(在引用源码的时候需要)dfn - 定义字段em - 强调font - 字体设定(不推荐)i - 斜体img - 图片input - 输入框kbd - 定义键盘文本label...

相似回答