html网页缩小之后,部分样式乱掉,字体不会跟随网页缩放而改变大小。求解?

今天闲来无事想模仿腾讯课堂敲个网页,结果敲到一半网页缩小时字体样式炸了。有部分字体变成了两排。图中可以看到,宽度我设置的是百分比。到底是啥原因?字体我用的rem,
另:如果是字体不会随着网页改变大小而造成样式乱掉的问题又该怎么解决pc端网页字体大小自适应的问题。
腾讯课堂的页面不管怎么缩小都不会炸,样式也不会乱掉?此处是我写的网页
图片说明
----------------------------------------漂亮的分割线-------------------------------
此处是我腾讯课堂的网页
图片说明

5个回答

在html顶部加

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

字体会随页面的变化而变化

是不是绝对定位的问题?position=“absolute”,改成相对定位或者浮动定位试试

qq_26969485
qq_26969485 不是定位的问题,位置上就是几个a标签我让他左浮动了。宽度不够就变成两排,不知道怎么解决。
2 年多之前 回复

首先,我想问问你rem的根目录html的字体你有用@media做自适应大小变化吗?其次我想问你这个乱掉的样式的宽度是不是用百分比来弄的?如果是,那页面缩小了,宽度不足够时自然是要掉下来的,我觉得像这种可以固定宽度的,你可以给个min-width来设置它的最小宽度

qq_26969485
qq_26969485 昨天回家用火狐浏览器试了一下,发现不管怎么缩小都没有样式乱掉,但是在谷歌上就不一样了。另外@media pc端怎么做媒体查询?没用过?
2 年多之前 回复

建议页面固定宽度,字体用rem

在html顶部加
字体会随页面的变化而变化

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
网页字体的放大与缩小
看别人的博客时,有时字很小,不太适合阅读,于是就想看看怎么调整字体大小。后面发现,其实可以直接调整网页的大小,这样更方便,字体也变大了,也适合阅读。   放大网页的办法:任意浏览器,可按住键盘CTRL键,滚动鼠标滚轮。往上滚动是放大网页文字,往下滚动则是缩小网页文字。这个方法在查看pdf的时候也有用。
【html】网页缩小,页面的元素不会改变位置
       不做那种响应式,而是做成无论网页怎么缩小,里面的元素是不会改变位置的,一般页面大小改变会有些元素位置。 只需加一个属性: viewport属性控制窗口大小 &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=1024(这里写你指定宽度)&quot;&amp;gt;...
浏览器缩小窗口 样式乱掉
解决方法:自动变为滚动条:给div固定宽度直接用滚动条:添加样式 overflow:scroll  overflow:auto
网页字体缩放样式:-webkit-text-size-adjust的用法
在Normalize.css看到了-webkit-text-size-adjust,以前也没有见过这个属性,所以我就在网 上找了一点资料来记录一下,以防忘记!     中文版的chrome浏览器中的当将字体设置为小于12px的时候,chrome浏览器往往不会显示比 12px还要小的字,因为该浏览器中默认的字体最小是12px,所以当你想设置为10px的时候,该 浏览器页面中还是会显示的是
(++++打开网页时, 内容不会随网页的大小而改变, 如何做?++++)
(++++打开网页时, 内容不会随网页的大小而改变, 如何做?++++)
怎样改变网页字体?
现在网页显示的是简体中文,我想要的是进入网站的时候就直接是繁体字,不用点什么简体/繁体之间的转换,请问有什么好的方法吗?
怎样改变网页的大小!!!
我是新手,我想知道怎样才能使我做的网页大小变为原来的一半,我能不能设定网页的大小,比如网页的宽度和高度!!!rn希望各位大哥帮忙!!!rn谢谢!!!
HTML网页字体动态显示
下面是测试代码: &lt;script language="javascript"&gt;function changeColor() {var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";color=color.split("|");document.getElem...
HTML:网页字体的编码问题
问题概要:rn使用DreamWeaver的框架,建的工程,初始的各部分都正常,在调用自己的网页显示在框架里后自己做的网页成了乱码!rn如果用IE直接打开自己做的网页,正常。rnrn问题详细说明:rn[code=HTML]rn 无标题rnrnrnrn rn rn rn rn rnrn <body>rn</body>rnrn[/code]rnrnrn我在UntitledFrame-3.html中响应事件(就是一个网页连接),在mainFrame中打开该连接所指向的网页,显示为乱码。rnrn我自己写的那个被连接的网页,头:rn[code=HTML]rnrnrn rn 无标题文档rn...rn rn[/code]rnrn谢谢帮忙!
背景图跟随界面大小而改变
有一张比较大的背景图2000×648rn利用css设置为页面的背景rnCSS如下:rnbody text-align: left; font-family:"新宋体"; margin:auto;padding:0;rn font-size:12px;color:#0C0C0C; background-color: #FFF; rn BACKGROUND:url(../images/bj.gif) no-repeat;background-position: top center;rnrn请教大虾要怎么做可以让背景图片根据页面的大小而自动调整大小,始终显示全图,而不是一部分?
HTML网页部分(一)
一:css样式表有哪几种? 内联样式表:内联样式表是混合在HTML标签里使用的 内部样式表:内部样式表是放置在&amp;lt;head&amp;gt;标签内的,并且以&amp;lt;style type=&quot;text/css&quot;&amp;gt;&amp;lt;/style&amp;gt;来定义的 外部样式表:外部样式表是以个独立的文件,文件里定义了各种各样的样式规定,方便被多个HTML文件使用,导入外部样式表有两种方法: (1) 在页面中使...
Unity 字体背景大小跟随字体内容缩放
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class FetFont : MonoBehaviour { public Text text; public GameObject go; void Start () ...
解决html网页缩放问题
当我们学习过div布局的时候,你肯定会有这样的疑问:为什么别人的网页无论怎么缩放都不会影响它的想对位置,而我的页面在使用浏览器对页面进行放大缩小的时候,有时候会出现错位,或者边框无法吻合。将页面缩小到最小时,页面内容将会堆砌在一起呢?         首先出现这个问题的主要原因还是因为你对浮动、定位的理解不够透彻!下面我整理了几种解决的方案 方案(一):将width采用百分比设置   虽然
新手求解 字体缩小
rn rn rn 添加管理单位rn rn rn 管理单位名称: *rn 请输入管理单位名称rn rnrn rn rn rn rn rn rnrn rnrnrnrn这样出来的字体太大了,如何设置缩小,求解,一个个试太累了,求高手指点下
关于网页字体的大小设置
如何让字体的大小不随IE中“文字大小”的设定改变而改变(表格中也要一样)????rn就象csdn上,改变IE的字体设定,页面上的字体大小并没有改变
css改变字体的一些网页
css改变字体的一些网页,大家可以再自己的网站中试一下。。。
网页排版问题(字体改变)
网页里的字体不会随网页改变的字体而改变rnrnrn就是网页的字体无论大小都是按我们原来的字体,这个要什么做啊,就是排版不会改变
怎么改变网页自身的大小
急!!!rn谢谢
网页缩放
实现布局中的代码 我们需要加载网页的webView控件<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" an
请问如何改变网页的大小
请问如何改变网页的大小,不是POP UP. 例如在一些购物网站中,点击图片或文字,另一页打开,此页大小是固定的,通常是根据内容而定,请问如何用DREAMWAVER或SCRIPT设定网页的大小,并设为UNRESIZEABLE(不可RESIZE).
Android App不跟随系统字体改变而改变
最近发现一个问题,就是app实现混合开放之后,当系统字体改变,例如使字体变成150,之后webview没有做限制的话会使webview里面加载的内容变大,web前端控件将变形,解决方法是创建一个BaseActivity 在里面实现如下方法: //系统字体调节时,所有activity都不做更改 @Override public Resources getResources() { Re...
在网页上实现字体的放大和缩小
http://news.xinhuanet.com/newscenter/2003-01/17/content_693977.htm#rn大家可以去,新华网上去看看,点击放大和缩小图标看看,网页有什么变化?rnrn现在的问题是,怎样实现的?
网页常用的特效(HTML样式)
网页常用的特效(HTML样式)与网页特效精灵不一样的效果
C#后台代码改变字体样式大小
float size = label1.Font.Size;label1.Font = new System.Drawing.Font(label1.Font.FontFamily, size + 10);//以上是更改字体的大小,同理,可以根据fontFamily去更改字体的样式...
C++ 改变对话框字体 样式及大小
C++ 改变对话框字体 简单示例 按钮字体 TexBox字体等
如何用HTML语言固定网页里的字体,使在浏览器里改变不了字体的大小????
如何用HTML语言固定网页里的字体,使在浏览器里的“查看-文字大小”这一选项改变不了字体的大小
myie2的网页大小缩放是怎么实现的?
能像opera一样放大或缩小网页, ie本身好像没有接口实现这个功能吧?
CSS网页只适应大小 背景图缩放
背景图缩放: background-size:cover; -webkit-background-size: cover; /*兼容Webkit内核浏览器如Chrome和Safari */ -o-background-size: cover; /*兼容Opera*/ 底部固定: position: fixed; width: 100%; bottom: 0; div自适应...
html代码禁止浏览器缩放网页大小
html5默认允许用户缩放页面,如果需要禁止缩放,我们需要将user-scalabel=0设置下,具体代码如下:&amp;lt;meta content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;&quot; name=&quot;viewport&quot; /&amp;gt; 注意:meta在head里。...
奇怪的问题,网页重定向之后不会自动更新了
重装了系统后,以前用location="a.asp"重定向后可以自动刷新页面的,但是重装了系统,不行了,只能手动刷新,拿位达人碰到过我的问题rn
我的网页的字体的大小怎么可以改变(在线等待!)
我的网页怎么在用察看是改变字体的大小是会改变,主要是我的有包含的文件回改变而其他本页的不会改变?谢谢
改变UISegmentedControl样式,改变字体
NSDictionary *textDic = [NSDictionary dictionaryWithObjectsAndKeys: [[UIColor blackColor] colorWithAlphaComponent:0.6f],UITextAttributeTextColor, ...
网页的放大与缩小
使用setDefaultZoom()方法来将参数传入,实时展现出放大网页、缩小网页的效果,实际拿来应用时,你可以在Activity里的onCreate()当中,判断手机画面的分辨率,再在配置WebView浏览网页的画面时,设置适合的浏览器大小,又或者可以通过与屏幕手势、多点触控时,实时进行变更网页的画面大小。 分享参考自Android SDK开发范例大全第3版。
怎么缩小打印网页
怎么缩小打印网页?rn
ASP网页如何缩小
如何把ASP页面自动缩小成指定的大小,
html网页include网页
我在top.htm写了网页的导航!在index.htm里面包含着个top.htm文件!rnrn失败!为什么啊。用.shtml到时可以!但是我想用htm怎么做啊!静态页面!
IE网页页面布局缩小
同样的分辩率,IE版本7.0,XPP 英文版,访问一个页面rnrn一台机器上显示正常,但是另外一台出现了页面布局缩到左边,一些输入表单(文本框)变窄(但高度不变),一些表格布局也缩起来导致文字换行,,不知道什么原因,尝试重新安装IE7,恢复IE7的所有设置都没用.rnrn大家帮忙看看是问题出在哪里.谢谢rnrn补充:不是字体或者是一些其他设置的问题,都试过了,Ctrl+滚轮也试过,不是这个问题
android 改变字体样式
上传的是一个android字体样式,可以个性化设置字体,让你的app看起来更加的炫酷。
JavaScript -------改变字体样式
var txt='Hello World !';  document.write(&quot;&amp;lt;p&amp;gt;字体变大: &quot; + txt.big() + &quot;&amp;lt;/p&amp;gt;&quot;); document.write(&quot;&amp;lt;p&amp;gt;字体缩小: &quot; + txt.small() + &quot;&amp;lt;/p&amp;gt;&quot;); document.write(&quot;&amp;
android 改变字体字体和大小
android 改变字体字体和大小,单机按钮来改变字体和大小
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法