我已经完成了简单的页面,似乎对不同大小的屏幕反应良好。 我没有做任何想要实现这一点的事情 - 只是避免固定尺寸等。

但是,一个页面有一个大字体的单个单词:

在此输入图像描述

当我调整浏览器大小时,所有其他内容都会正确显示,但标题词当然不会中断:

在此输入图像描述

处理这个问题的正确方法是什么? 有没有办法根据屏幕宽度调整字体大小?

===============>>#1 票数:12

另一种选择是使用视口百分比长度

vw单位:等于初始包含块宽度的1%。

你可以在CSS Tricks上阅读更多关于它的内容,它讨论了某些浏览器的重绘bug,但你可以用一点jQuery来解决它。

http://jsfiddle.net/7L9QH/

CSS

h1 {
    font-size: 25vw;
}

===============>>#2 票数:4 已采纳

您可以使用以下媒体查询:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
   body {
    background: #ccc;
  }
}

更多信息可以在这里找到: http//css-tricks.com/css-media-queries/

===============>>#3 票数:0

你试过FitText吗?

它是为这种场合制作的jQuery插件。 引用他们的描述:

FitText使字体大小变得灵活。 在流体或响应式布局上使用此插件可实现填充父元素宽度的可缩放标题。

  ask by Ben Packard translate from so

未解决问题?本站智能推荐:

2回复

在移动设备上单击/点击时如何摆脱框框?

我试图摆脱仅在用户点击/按住链接(按钮)时才出现在移动设备上的框。 我注意到,当我将活动状态颜色设置为我想要的字体颜色时,它似乎也设置了背景颜色。 这是在移动设备上单击链接之前和之后的外观(在桌面上看起来不错)。 单击前的按钮轻按/按住后的按钮
2回复

移动网站背景图片未调整大小

这里很新,从来没有问过这个表格,所以请原谅我的困惑。 我的背景图片有问题。 在我的PC上或当我将手机侧面打开并横向查看时,它看起来都不错; 但是,它被切断并且无法在纵向视图中调整大小。 我只能以底部空白或图像被切掉为代价来显示完整图像。 我已经尝试了许多已经发布在这里的解决方案,但都没
2回复

如何检测用户是否正在使用CSS从手机浏览我的网站?

我正在设计一个网站,允许用户搜索项目以显示相关信息,或者使用下拉菜单选择两个项目并比较两者。 我想要做的是有两个可以加载的单独样式表; 一个用于移动用户,一个用于所有其他用户。 我试图寻找可能的解决方案,但似乎没有一个与我想做的完全匹配。 我担心如果我选择基于屏幕分辨率的样式表,那么
1回复

CSS似乎无法在移动设备上运行

我正在测试一个站点,它在台式机/笔记本电脑上可以完美运行,但是一旦使用了移动设备,它就会失败。 我的意思是页面无法识别。 示例页面已启动并在http://danjamespalmer.com/projects/decoathletic/index.html上运行。 可以从源代码中查看所
1回复

Kube CSS网格在移动设备上无响应

我正在使用Kube CSS框架,并且在响应网格方面遇到了麻烦。 我有这样的html,取自这里的第一个示例 页面渲染器与桌面上的示例相同 问题是当我在移动设备上时。 当我在Kube网格示例上打开chrome dev工具时,列会响应,并且宽度为100%。 这是我的网页
1回复

CSS移动版-文本不会调整大小

我正在尝试将移动版本添加到一个简单的网站,但是在更改窗口大小时似乎无法获得任何要调整大小的文本。 为了在页面上举一个例子,我试图让#bannerText中的文本调整大小并扩大字母间距。 #bannerText的唯一父母是正文>页面>横幅。 以下是代码的重要片段: 我尝试
3回复

更改移动设备的网站设计或浏览器调整大小

我很抱歉,如果这个问题已被问到我确定某处必须有一个答案,但由于某些或其他原因我无法找到它,可能使用错误的搜索查询 我知道您可以使用媒体查询来定位不同的设备,如下所示: 但我想知道的是,如何根据所查看的设备更改我的网站设计? 例 让我们说我的正常网站结构是这样的:
1回复

在浏览器中工作的媒体查询无法在移动设备中调整大小

我正在尝试为小型浏览器和移动设备创建固定的图像效果。 这是页面: http : //www.minecraftserverland.com/elpatron/index.php将浏览器中的页面调整为小于768px的预期效果时,效果完美。 但是,在移动设备上,它看起来完全不同。 为什么会这样
1回复

CSS / Bootstrap - 字体大小无法从计算机调整到移动设备:移动设备上的字体看起来很小

这是我的CSS: 当我在笔记本电脑上调整浏览器窗口大小时,它会正确调整大小。 但这是我的问题:当我从我的移动设备访问我的网站时,字体大小太小(我不知道为什么但我的移动设备上的22px太小了,我必须放大才能看到它正确)。 当我将较小屏幕宽度的字体大小增加到40px时,它在我的移动设备上
1回复

媒体查询适用于移动设备,但不适用于浏览器调整大小

我在文档顶部使用以下代码: 使用移动设备以及FF中的“自适应设计视图”进行浏览时,自适应CSS可以很好地加载,但是当我只是尝试在FF或Chrome浏览器中调整浏览器大小时,它仍然保持桌面布局。 有人知道为什么吗? 我使用的是我一直使用的相同代码,过去从未遇到过此问题,除非我忘了包