首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当宽度降到990px时,页面被缩小

是因为响应式设计的实现。响应式设计是一种能够自动适应不同设备和屏幕尺寸的网页设计方法。通过使用CSS媒体查询和弹性布局等技术,网页可以根据设备的屏幕宽度进行自适应调整,以提供更好的用户体验。

在宽度降到990px时,页面被缩小可能是为了适应较小的屏幕尺寸,以确保内容不会溢出或导致用户需要水平滚动页面。通过缩小页面宽度,可以使页面元素重新排列和调整大小,以适应较小的屏幕空间。

对于开发人员来说,实现页面在不同屏幕尺寸下的自适应布局可以通过以下方式实现:

  1. 使用CSS媒体查询:通过在CSS中使用@media规则,可以根据不同的屏幕宽度应用不同的样式。例如,可以设置在宽度小于990px时,某个元素的宽度为100%。
  2. 弹性布局:使用弹性盒子(Flexbox)或网格布局(Grid)等CSS布局技术,可以使页面元素根据可用空间自动调整大小和排列。
  3. 图片和媒体的响应式处理:通过使用CSS的max-width属性或使用srcset属性,可以根据屏幕尺寸加载适当大小的图片或媒体文件,以提高页面加载性能。
  4. 移动优先设计:在设计和开发过程中,优先考虑移动设备的布局和功能,以确保在较小屏幕上的良好用户体验。
  5. 测试和调试:在开发过程中,使用浏览器的开发者工具或模拟器来模拟不同的屏幕尺寸和设备,以确保页面在各种情况下都能正常显示和工作。

对于腾讯云相关产品和服务,可以根据具体需求选择适合的产品。例如,腾讯云提供的云服务器(CVM)可以用于部署和运行网站,云数据库(CDB)可以用于存储和管理数据,云存储(COS)可以用于存储和分发静态资源等。具体产品介绍和链接地址可以参考腾讯云官方网站。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

两个 viewports 的故事-第二部分

视觉视图通过缩放改变(如果是放大,屏幕上的 CSS 像素会变少),布局视图的尺寸不会变。...(如果变化了,你的页面会用百分比的宽度重新计算) 理解布局视图 为了理解布局视图的尺寸,我们应该看一下页面完全缩小后发生了什么。大多数手机浏览器默认以完全缩小模式显示页面。...当然只有两种属性都被支持才有效。 幸运的是,缩放比例并不重要。你需要知道的是当前屏幕上有多少 CSS 像素,你可以通过 window.innerWidth 获得(如果该属性支持的话)。... 元素收缩了,其他元素的宽度是 320px 的 100%。当用户放大的时候会看出来,而不是最初用户可能面对包含空白的缩小页面。 ?...举例来说,Nexus One 实际宽度为 480px,但是谷歌的工程师认为使用 device-width 布局视图 480px 的宽度太大。

1.8K70
  • 07-移动端开发教程-移动端视口

    2.2 移动端视口 在移动端视口与移动端浏览器屏幕宽度不再相关联,可以比浏览器的可视区域更大或者更小,还可以对页面进行缩放(放大、缩小)。...如果设置一个元素为100px*100px,看起来就是屏幕的100/320 如果布局视口的宽度=device-width(设备宽度,也就是:物理像素/dpr),此时页面100%的宽度正好能在视觉视口中完全显示...理想视口的宽度一般可以通过以下公式计算: 理想视口的宽度 = 设备像素 / dpr 也就是布局视口的宽度 等于 设备独立像素的宽度就是理想视口。 简单的指定的方法: <!...缩放比 = 理想视口的宽度 / 视觉视口的宽度 也就是说视觉视口的宽度 和 理想视口的宽度相等,则就是1。...user-scalable 如果你不想页面放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

    1.5K80

    07-移动端开发教程-移动端视口

    如果设置一个元素为100px*100px,看起来就是屏幕的100/320 如果布局视口的宽度=device-width(设备宽度,也就是:物理像素/dpr),此时页面100%的宽度正好能在视觉视口中完全显示...理想视口的宽度一般可以通过以下公式计算: 理想视口的宽度 = 设备像素 / dpr 也就是布局视口的宽度 等于 设备独立像素的宽度就是理想视口。 简单的指定的方法: <!...缩放比 = 理想视口的宽度 / 视觉视口的宽度 也就是说视觉视口的宽度 和 理想视口的宽度相等,则就是1。...视觉视口:页面手动放大的时候,用户可以看到的网页内容减少,视觉视口的尺寸变小。反之,同理不赘述。...user-scalable 如果你不想页面放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

    1.9K120

    比用Pytorch框架快200倍!0.76秒后,笔记本上的CNN就搞定了MNIST | 开源

    一、提前停止训练 在经历3到5个epoch,测试准确率达到99%就提前停止训练。 这时的训练时间就减少了1/3左右,达到了57.4s±6.85s。...这样,需要收敛的epoch数就降到了3个以下,训练时间也减少到30.3s±5.28s。...这时,我们只需要一次epoch,就能将平均训练时间下降到7.31s ± 1.36s。...在训练开始学习率为0,到中期线性地最高值(4.0),再慢慢地降到0。 ? 这使得我们的训练时间下降到3.14s±4.72ms。...六、再次增加Batch Size、缩小缩小网络规模 重复第二步,将Batch Size增加到256。 重复第四步,去掉剩余的dropout层,并通过减少卷积层的宽度来进行补偿。

    48250

    MorphNet:更快更小的神经网络探索

    利用这个想法,MorphNet可以确定网络中每个神经元的增量成本,从而产生一个更有效的模型,在这个模型中,神经元y3移除。 在展开阶段,我们使用宽度倍增器来均匀地展开所有的层大小。...在优化计算成本,较低层网络中的高分辨率神经元比低分辨率神经元更容易受到修剪。模型尺寸较小时,在修剪权衡上正好相反。 ? MorphNet 有针对性的正则化。矩形宽度与层中的通道数成正比。...拓扑变形: MorphNet 学习每层神经元的数量,算法在一个层中稀疏所有神经元的过程中可能会遇到一种特殊的情况。...一个层有 0 个神经元,通过切断网络中受影响的分支,可以有效地改变网络的拓扑结构。...基线方法是使用一个宽度倍增器,通过均匀地缩小每个卷积(红色)的输出数量来权衡精度和触发器。MorphNet 方法的目标是直接 FLOPs,并在缩小模型产生更好的权衡曲线(蓝色)。

    54110

    第119天:移动端:CSS像素、屏幕像素和视口的关系

    ,默认值yes (1)width width属性用来控制layout viewport(布局视口)的宽度,layout viewport(布局视口)宽度默认值是设备厂家指定的。...网页缩放比例为100%,一个CSS像素就对应一个 dip(设备逻辑像素),而layout viewport(布局视口)的宽度,ideal viewport(理想视口)的宽度(通常说的分辨率),dip...(5)minimum-scale 类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,不会定义该属性的值,页面太小将难以阅读。...以缩小为例   1、viewport的逻辑宽度和视觉宽度初始都为width,逻辑宽度不变,视觉宽度以initial-scale缩小;视觉宽度缩小到跟屏幕一样宽,不再缩小,变成逻辑宽度变大,视觉宽度不变...4、无法缩小到文字不能再缩小的程度 总结:viewport视觉宽度缩小到屏幕宽度之前,viewport、百分比宽度元素、固定宽度元素,都是逻辑宽度不变,视觉宽度以同等比例缩小

    1.7K50

    单屏页面响应式适配玩法

    ,这时候页面底部的部分文本就会溢出隐藏掉。...因为高度变矮,内容的尺寸会随之变小,而页面是 1190 宽,水平居中布局,所以只改变浏览器宽度的情况下,不会出现宽度变化溢出问题(除非分辨率超大,然后高度居很高,只把宽度缩很小的情况,这个下面会说到)...事实是,rem 缩小到一定值就不会再缩小了,这个跟浏览器对字体大小限制为最小 12px 一样,看个例子。 ?...通过 JS 计算,当可视区比例为竖向比例,则在顶层元素加上 .vw-mode 类名,比例为横向比例,则去掉 .vw-mode 类名。...document.documentElement.clientWidth const clientHeight = document.documentElement.clientHeight // 长宽比为竖向比例

    2K20

    手机软键盘弹起导致页面变形的一种解决方案

    在开发APP,通常情况下页面宽度和高度都会设为 100%,即页面高度等于屏幕高度,页面宽度等于屏幕宽度。... input 获取焦点,软键盘弹出,页面高度挤压,此时页面高度 = 屏幕高度 - 软键盘高度。所以,页面高度缩小,元素都挤压在一起,布局被打乱。...举例: 我开发的 APP 运行在 ipad上,横屏显示,高度为 768px ,我可以把 768px 当做页面的最小高度。...软键盘还是会弹起,因为页面最小高度设为了 768px,所以此时总高度为 768px + 软键盘高度,超出了屏幕高度(ipad横屏屏幕高度为768px)。...如上图所示,此时原来页面的上半部分“消失”,就是顶上去了,只显示原来页面的下半部分。但至少我们要的页面布局不变形已经实现了。等输入完,软键盘收起页面恢复原状。

    2.3K40

    java移动端开发_移动端开发

    一个宽度只有375像素的手机,却能够显示宽度为980像素的网页,自然而然,网页会被缩小。...我们可以使用谷歌浏览器的移动端调试工具,来访问百度的搜索结果,可以看到网页明显缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。...(比如JS)无意中修改了网页的放大比例 user-scalable=0 :这句代码才是不允许用户对网页进行缩放 其实这就是禁止缩放,在手机端写出的页面将会无法整体左右滑动(当然,想要内部滑动可以自己设置啊...这样一来,就要求我们在开发移动端的页面遇到字体大小、宽高、margin、padding等尺寸类的属性,不能设置固定的像素值。 注:border边框大小除外 (既然有问题,怎么会没有解决办法呢?...比如,设计稿中某个元素的宽度为100像素,那么应该设置它的宽度为 1rem ,这样一来,视口尺寸等于设计稿尺寸1080,根元素的字体大小为(1080/1080)*100 = 100px ,它的宽度

    5K20

    【Android】WebView 应用模版 ( WebView 设置 | 设置 WebSettings | 启用调试模式 | 设置 WebChromeClient )

    useWideViewPort 属性设置为 true ,WebView 将支持 Viewport 元标记的宽度,并自动调整网页的缩放比例以适应设备的屏幕宽度。...在宽视图端口模式下,WebView 会将页面缩小到适应屏幕的宽度。 这意味着用户在浏览网页无需进行横向滚动,但可能会使网页缩小得过多,影响可读性。...// 设置 WebView 是否使用宽视图端口模式 // 宽视图端口模式下 , WebView 会将页面缩小到适应屏幕的宽度 // 没有经过移动端适配的网页 , 不要启用该设置..., WebView 会将页面缩小到适应屏幕的宽度 // 没有经过移动端适配的网页 , 不要启用该设置 settings.loadWithOverviewMode = true..., WebView 会将页面缩小到适应屏幕的宽度 // 没有经过移动端适配的网页 , 不要启用该设置 settings.loadWithOverviewMode = true

    3K20

    【学习图片】1.图片简史

    渲染引擎得到的图像数据多于图像在布局中所占据的空间,它们就能对如何渲染缩小的图像做出明智的决定,并且可以在不引入任何视觉伪影或模糊的情况下完成。...使用 img { max-width: 100% } 意味着,灵活的容器调整大小时,图像将根据需要缩小。与设置更严格的 width: 100% 不同,这也确保图像不会超过其固有大小而缩放。...对于仅通过小视口查看页面的用户,一切都会看起来很正常,因为图像将很好地缩放。在呈现的页面中,一个巨大但缩小的源图像看起来与适当大小的图像没有任何区别。...为了适应高密度显示器,图像源需要更大的内在宽度。简单地说,密度是双倍的显示器需要两倍多的图像像素才能尽可能清晰地呈现图像。 在这里,开发人员再次可以依靠渲染引擎将图像缩小的能力。...响应式Web设计成为主流开发实践,浏览器对img的性能进行了优化,但除了最优越的用户外,页面的图像内容从一开始就是低效的。无论浏览器如何快速请求、解析和渲染图像源,该资源很可能比用户需要的更大。

    1.1K40

    弹性(Flex)布局的使用

    微信图片_20200117094033.jpg 最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少。...auto; -->> flex: 1 1 auto; flex: 0 auto flex: initial -->> flex: 0 1 auto; 即flex的初始值 开发中遇到的问题 1、子元素压缩...问题: 设置子容器的长度flex为1,其他的子容器的长度会被压缩。...解决方法: 设子容器width:0;可能出在于子容器没有设置宽度,省略符可能需要对父元素设置宽度,设置为100%无效,设置为0的时候,子容器恢复到设定的宽度,省略号也出现了。...设置为0,不会自动增长/缩小,防止固定大小的元素宽度发生变化。

    2.1K10

    css绝对定位如何在不同分辨率下的电脑正常显示定位位置?

    写网页,如果在1920这样的大分辨率写好之后,再去小分辨率的笔记本看同样的这个网页,会发现,笔记本电脑显示的基本为宽屏大显示器下网页放大至1.5倍左右的展示效果。...2、为了页面在不同的分辨率下正常显示,要给页面一个安全宽度,一般在做1920px宽的页面,中间要有一个1200px左右的安全宽度,并且居中,所有的内容要写在这个宽度的box里,如果有背景图或者轮播图必须通栏整个页面的时候...,一定要设置成居中对齐,这样分辨率降低之后,背景图或者Banner图左右、中间1200宽度的盒子依然居中对齐,不会出现向左向右偏离。...还有一个小问题,在页面加载慢的时候重新刷新页面会先显示放大的效果,再变为缩小后的效果,会闪一下,这个还没找到解决办法,希望懂的朋友们多多交流。...scale,则该缩小相当于当前页面缩小的效果了,两边自然会留白。

    3.4K70

    JS:用rem来做响应式开发

    但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用的很少,最多用到它排版,网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,所以这次我想自己用原生写,响应式开发...所以body默认宽度是屏幕宽度 (PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。...那就要用到js在页面加载获取window的宽度(浏览器窗口的宽度)$(window).width();在开发手机页面的时候,一般我们设置最大宽度为640px,因为640px可以保证在至今最宽的手机上显示网页两端刚好贴合屏幕...屏幕放大缩小这三个div也同样还在一行等比放大缩小 html 1 <div class="box...'fontSize',size+'px'); } } 注意这里有一个小坑,当你把这个小demo拿到谷歌浏览器里面验证的时候,你会发现开始这3个div会随着你浏览器窗口<em>缩小</em>而<em>缩小</em>

    6.1K10

    移动端适配动态rem方案

    # 1 前言 设计师交付给前端开发一张宽度为750px的视觉稿,设计稿上元素的尺寸、颜色、位置等已做过标注,要求工程师工在适配不同屏幕尺寸的设备采用等比缩放的方案。...使用viewport缩放方案实现页面级的缩放适配。但该方案有个问题,1px的边框在大屏手机放大后显得很粗,在小屏手机上缩小后又显得太细。...我们需要更换另外一种方案——整体能根据屏幕放大缩小,局部又能保持固定的尺寸。 可以使用动态REM方案。 # 2 原理 在使用单位控制页面元素大小时,可以使用固定单位px,也可以使用相对单位rem。...我们可以 设置html的font-size 为 100*屏幕宽度/设计稿宽度 在写CSS设置 div 的宽度是 3.75rem (计算用设计稿标注值除以100),边框宽度为1px 假设用户在逻辑像素宽度是...假设用户在逻辑像素宽度是428px的设备上打开页面,则html的font-size是100*428/750 = 57.07px,div的宽度是3.75rem ,即214px 正好是屏幕宽度的一半。

    77010

    Css-移动端适配总结 前言PC端Mobile总结参考&引用

    缩小时: ? 放大: ?...如果两个属性都能设置ideal viewport, 那么两个属性冲突怎么解决? 遇到这种情况,浏览器会取它们两个中较大的那个值。...例如,width=400,ideal viewport的宽度为320,取的是400;width=400, ideal viewport的宽度为480,取的是ideal viewport的宽度。...6.缩小viewport 原理是使用meta标签中的viewport, 也就是上面所说的设置viewport, 将整个页面缩小0.5倍, 这个主要是麻烦在其他的元素也要跟着放大一倍再缩小, 为了这个小问题而这样...大佬认为, 当用户使用更大的屏幕的时候, 他应该能看到更多的内容, 而且设计稿放大或者缩小的话, 会失去他原来的感觉。

    2.4K20

    只要一行代码,实现五种 CSS 经典布局

    页面布局是样式开发的第一步,也是 CSS 最重要的功能之一。 ? 常用的页面布局,其实就那么几个。下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面。...这两个属性的值一致,就可以合并写成一个值。所以,place-items: center;等同于place-items: center center;。 同理,左上角布局可以写成下面这样。...flex-shrink:指定如果宽度不足,项目是否可以缩小。 flex: 0 1 150px;的意思就是,项目的初始宽度是150px,且不可以扩大,但是容器宽度不足150px,项目可以缩小。...四、三明治布局 三明治布局指的是,页面在垂直方向上,分成三部分:页眉、内容区、页脚。 ? 这个布局会根据设备宽度,自动适应,并且不管内容区有多少内容,页脚始终在容器底部(粘性页脚)。...五、圣杯布局 圣杯布局是最常用的布局,所以比喻为圣杯。它将页面分成五个部分,除了页眉和页脚,内容区分成左边栏、主栏、右边栏。 ? 这里的实现是,不管页面宽度,内容区始终分成三栏。

    1.8K20

    【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

    translateX(-50%); 2、设置最大宽度和最小宽度 在移动端网页中 , 一般都要设置一个 最大宽度 和 最小宽度 ; 浏览器的宽度超过最大宽度 , 则网页布局最大就是该 最大宽度 , 继续放大网页不再随着页面一起放大...; 浏览器的宽度小于最小宽度 , 则网页布局最小就是该 最小宽度 , 继续缩小显示布局布局 ; /* 设置最大和最小宽度 */ min-width: 320px; max-width...: 在 Firework 中 , 将精灵图缩小一半 ; 测量坐标 : 在缩小一半的精灵图中测量坐标 ; 设置代码 : 将代码中的 background-size 缩小一半 , 也就是精灵图缩小一半...-- 顶部固定定位搜索栏 - 不随着页面滑动而消失 --> <!...transparent; } /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ input { -webkit-appearance: none; } /*禁用长按页面的弹出菜单

    32220
    领券