文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

; content 属性中的参数 用于设置 视口大小 和 缩放比例 ; width=device-width 样式 设置 网页宽度 = 设备宽度 , 即 理想视口 ; user-scalable=...参数 设置 网页缩放的最小比例 , 该值大于 0 即可 ; maximum-scale 参数 设置 网页缩放的最大比例 , 该值大于 0 即可 ; 二、CSS 样式文件设置 ---- 在 index.html...在移动端网页布局中 , 网页布局宽度 = 移动设备宽度 , 因此在进行布局时 , 可以为网页布局的主体 标签设置 100% 宽度 ; 2、设置布局最大宽度 将 京东 手机端页面 , 拉倒最大便不再放大..., 如下图所示 , 这是因为该页面设置了最大像素 ; 一般移动端页面最大像素设置为 980 像素 ; 3、设置布局最小宽度 将京东的 手机端 页面宽度压缩到最小 , 如下状态时 , 就不能再进行压缩了..., 这是因为该页面设置了最小宽度 ; 一般设置最小宽度 320 像素 , 智能手机中的屏幕如果是 320 像素 , 这就是最小的手机屏幕了 ; 4、查看网页最大最小宽度 进入京东页面 , 按 F12

2.4K10

探讨移动端适配

在探讨移动端适配前我们先要了解下面几个概念 像素 分辨率 物理像素 CSS像素 像素 像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。...电视的图像是由按一定间隔排列的亮度不同的像点构成的，形成像点的单位也就是像素，组成图像的最小单位就是像素。从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位。...这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好 这也就是我们常说的布局视口 完美视口（理想视口） 默认情况下 移动端的像素比为...，依赖于视口大小而自动缩放，无论视口过大还是过小，它也随着视口过大或者过小，失去了最大最小宽度的限制。...，达到不好的用户体验，这里我们可以通过rem的特性解决无限拉伸的问题 1.给body规定最大与最小宽度 2.使用媒体查询限制html字体大小的值 另一种实现方式 这里我在网上找到了另一种办法，可以解决上述方法的尴尬处境

1.4K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    响应式布局的实现

    print: 用于打印机和打印预览。 screen: 用于电脑屏幕，平板电脑，智能手机等。 speech: 应用于屏幕阅读器等发声设备。...max-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。 max-color: 定义输出设备每一组彩色原件的最大个数。...max-color-index: 定义在输出设备的彩色查询表中的最大条目数。 max-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。...min-color-index: 定义在输出设备的彩色查询表中的最小条目数。 min-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最小比率。...vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。 vmin: vw和vh中的较小值。 vmax: vw和vh中的较大值。 缩放比例 通过动态地控制网页视图的缩放比例来制作响应式布局。

    2K30

    超越媒体查询：使用更新的特性进行响应式设计

    如前所述，我们没有将一个图像（通常是较大的高分辨率版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定了一组图像以在特定情况下使用。...如果我们按比例制作不同的图片，这种方法就能奏效。这允许浏览器根据屏幕的像素密度和视口大小来决定下载哪个版本。...浏览器查找媒体查询与当前视口宽度匹配的第一个元素，然后它将显示适当的图像(在srcset属性中指定)。...中设置最小值和最大值 min()函数指定元素可以缩小到的绝对最小大小。...相反，如果60％的值小于600px，则将使用600px作为元素的宽度 限定值 clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用

    4.1K10

    什么是移动端开发【重点学习系列—干货十足–一万字详解】

    注意: 并不是所有的图片都这样处理，只需要处理那些页面布局需要的图片和图标即可 视口 PC 端 在 PC 端，视口指的是浏览器的可视区域。其宽度和浏览器窗口的宽度保持一致。...视觉视口 视觉视口就是用户可见的区域。 获取方式 注：不缩放的情况下，视觉视口宽度 == 布局视口宽度。 理想视口 宽度与屏幕同宽的布局视口称为理想视口。...使用示例 viewport 相关选项 - width 布局视口宽度 - initial-scale 初始化缩放比例 - minimum-scale 最小缩放比例 - 这里通过微信来浏览器演示...苹果内置的和很多安卓的浏览器不可用 itools 实时屏幕 - maximum-scale 最大缩放比例 - user-scalable 设置是否允许用户缩放 - 苹果内置的浏览器不好使，...minimum-scale = 屏幕独立像素宽度 / 视觉视口 maximum-scale 设置允许用户最大缩放比例，苹果浏览器 safari 不认识该属性 maximum-scale = 屏幕独立像素宽度

    2.6K21

    移动开发-媒体查询布局

    @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果、Android手机、平板等设备都用得到多媒体查询 ----...语法规范: 1️⃣media type 查询类型: 将不同的终端设备划分成不同的类型，称为媒体类型 值 说明 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑...定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 4️⃣媒体查询+rem实现元素动态大小变化: rem单位是跟着...1️⃣ rem 适配方案: 让一些不能等比自适应的元素，达到当设备尺寸发生改变时，等比例适配当前设备 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化...+ rem 方案 : 不需要再写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，在不同设备下，比例还是一致的 我们要做的，就是确定好当前设备的html文字大小就可以 比如当前设计稿是

    1.3K30

    为什么你永远不应该在CSS中使用px来设置字体大小

    px px 是像素的缩写……虽然现在大多数情况下它不再是一个真正的像素。在显示器通常是一个相对可预测的低分辨率像素比例，比如1024×768的时代， 1px 通常等于屏幕上的一个实际像素。...但默认情况下， 1em 和 1rem 都将等于 16px 。 “Em” 最初是指 “M” 字符的宽度，这也是名称的由来。但现在它指的是当前字体大小，而不是特定字形的尺寸。...即便如此，我仍建议使用 clamp() 或媒体查询来设置最小和最大值，因为屏幕尺寸往往远远超出我们所期望或测试的范围。...px 单位仍然与屏幕上像素的缩放值相关联。 em 和 rem 与文档的字体大小相关联，而不是页面的缩放或比例。...我只在想要与当前字体大小成比例的东西（例如，与一些文本旁边的图标应该与字符的高度完全相同，并且在一侧有半个字符的情况）中添加 em 。

    1.8K20

    rem适配布局

    ,称为媒体类型 值 解释说明 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，智能手机等 2.关键字 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件...注意他们要加小括号包含 值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 注意...④那么在320px设备的时候 ,字体大小为320/15就是21.33px ⑤用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的 ⑥比如我们以750为标准设计稿 ⑦一个100*100...像素的页面元素在750屏幕下，就是100/ 50转换为rem是2rem * 2 rem比例是1比1 ⑧320屏幕下 ，html 字体大小为21.33，则2rem = 42.66px，此时宽和高都是42.66...，但是宽和高的比例还是1比1 ⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果 3.元素大小取值方法 ①最后的公式：页面元素的rem值=页面元素值(px) / ( 屏幕宽度/划分的份数) ②屏幕宽度

    1.9K30

    移动web开发之rem适配布局

    怎样让屏幕发生变化的时候元素高度和宽度等比例缩放？ 1. rem基础 rem单位 rem(root em)是一个相对单位，类似于em,em是父元素字体大小。...、android手机、平板等设备都用得到多媒体查询 2.2语法规范 /* 这句话的意思是：在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */...，称为媒体类型 值 解释说明 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕、平板电脑、智能手机 2.关键字 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件...注意他们要加小括号包含 值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 2.3...100100像素的页面元素在750屏幕下，就是100/50 转换为rem 是2rem2rem 比例是1比1 320屏幕下，html字体大小为21.33 则2rem = 42.66px 此时宽和高都是

    1.9K20

    移动端适配必须掌握的基本概念和适配方案

    基本概念 响应式开发本质时针对多种屏幕做适配，在实际开发中，通常情况下时针对主流的设备进行适配。在开发前，必须掌握几个基本概念： 物理像素：即屏幕的实际像素点。...像素是屏幕设备的最小显示单元，如 iPhone4 的屏幕分辨率是640x960像素，即 iPhone4 的屏幕由横向640个像素和纵向960个像素排列组成。...通常情况下，大多数移动设备的 Viewport（一般指布局视口）的宽度都是 980 像素，而可视视口（即设备独立像素）通常都小于 980 像素。...（设备的高度） initial-scale 定义初始缩放比例 整数或小数 maximum-scale 定义允许用户缩放到的最大比例 整数或小数 minimum-scale 定义允许用户缩放到的最小比例...通常将页面宽度进行 10 等分，即： const rem = document.documentElement.clientWidth / 10 这样，rem 的大小完全是随屏幕正比变化，就能根据设计稿尺寸换算页面元素和字体的大小

    1K40

    移动端布局方案

    例如，把盒子的宽度设置成百分比，网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。 而且一般的情况下，我们都会用 max-width 和 min-width 做相关的宽度限制以防止过度的拉伸。...Rem适配方案使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。...通过获取屏幕实际宽度动态的设置 html 的字体大小，1rem = html 的字体大小像素(font-size)。...vw : 1vw 等于视口宽度的 1% vh : 1vh 等于视口高度的 1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个...= 9.256926vw 可以使用媒体查询限制根元素的最大最小值，实现对页面的最大最小宽度限制，对用户的视觉体验更好。

    13310

    前端架构师之路02_移动端布局方案

    例如，把盒子的宽度设置成百分比，网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。 而且一般的情况下，我们都会用 max-width 和 min-width 做相关的宽度限制以防止过度的拉伸。...Rem适配方案使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。...通过获取屏幕实际宽度动态的设置 html 的字体大小，1rem = html 的字体大小像素(font-size)。...vw : 1vw 等于视口宽度的 1% vh : 1vh 等于视口高度的 1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 计算方式实际上与百分基本一致...= 9.256926vw 可以使用媒体查询限制根元素的最大最小值，实现对页面的最大最小宽度限制，对用户的视觉体验更好。

    8010

    前端工程师之移动端布局方案

    例如，把盒子的宽度设置成百分比，网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。 而且一般的情况下，我们都会用 max-width 和 min-width 做相关的宽度限制以防止过度的拉伸。...Rem适配方案使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。...通过获取屏幕实际宽度动态的设置 html 的字体大小，1rem = html 的字体大小像素(font-size)。...vw : 1vw 等于视口宽度的 1% vh : 1vh 等于视口高度的 1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个...= 9.256926vw 可以使用媒体查询限制根元素的最大最小值，实现对页面的最大最小宽度限制，对用户的视觉体验更好。

    6610

    面试官：你了解过移动端适配吗？

    电视的图像是由按一定间隔排列的亮度不同的像点构成的，形成像点的单位也就是像素，组成图像的最小单位就是像素。从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位。...我们在移动端视口要想视觉效果和体验好，那么我们的视口宽度必去无限接近理想视口 理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示...那么所谓的理想宽度就是浏览器（屏幕）的宽度了。 于是上述的meta设置，就是我们的理想设置，他规定了我们的视口宽度为屏幕宽度，初始缩放比例为1，就是初始时候我们的视觉视口就是理想视口！...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。...屏幕如果你按照设计稿还原的话，字体大小实际上不一样，而人们在一样的距离上希望看到的大小其实是一样的，本质上，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。

    1.4K10

    CSS：绝对单位、相对单位

    image.png image.png  在第一个box里，整个宽度为600px,宽度为300px的和宽度为50%为等长。...px px 是 pixels（像素）的缩写，是一种绝对单位，用于屏幕显示器上，传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。...如果父元素没有设置字体大小，则继续往父级元素查找，直到有设置大小的，如果都没有设置大小，则使用浏览器默认的字体大小。...vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一 vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一 vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一 vmax：...基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一 下面我们实例说明实现一个宽度为视窗宽度的 25%，高度为视窗高度 50% 的一个盒子： .box { height: 50vh; /

    2.1K20

    【小程序_02】布局方式

    视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 （layout viewport） 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...2.3 理想视口 (ideal viewport) 为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸,需要手动添写meta视口标签通知浏览器操作。...，yes或no（1或0） 标准 viewport 设置 视口宽度和设备保持一致 视口的默认缩放比例1.0 不允许用户自行缩放 最大允许的缩放比例1.0 最小允许的缩放比例1.0 3....，称为媒体类型 值 说明 all 用于所有设备 print 用于打印机和打印预览 scree 用于电脑屏幕，平板电脑，智能手机等 2.3 关键字(and、not、only) 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件...注意他们要加小括号 值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 为了防止混乱

    1.4K20

    响应式布局，你需要知道这些

    我们期望页面可以根据用户的设备环境，比如系统，分辨率，屏幕尺寸等因素，进行自发式调整，提供更适合当前环境的阅读和操作体验，对已有和未来即将出现的新设备有一定的适应能力。 这就是响应式设计的理念。...像素是图像中最小的单位，一个不可再分割的点，对应到物理设备上（比如计算机屏幕），就是屏幕上的一个光点。...如果元素没有设置 font-size，会继承父元素的 font-size，如果父元素也没有，会沿着 DOM 树一直向上查找，直到根元素 html，根元素的默认字体大小为 16px。...viewport 最先由 Apple 引入，用于解决移动端页面的显示问题，通过一个叫 的 DOM 标签，允许我们可以定义视口的各种行为，比如宽度，高度，初始缩放比例等， 最小缩放比例，必须小于等于 maximum-scale maximum-scale，0-10，最大缩放比例，必须大于等于 minimum-scale user-scalable，yes/no

    1.8K20

    移动端H5开发之页面适配篇

    1.3 理想视口图片视觉视口，用户通过屏幕真实看到的区域我们可以通过调用 window.screen.width / height 来获取视觉视口大小1.4 页面适配方法综上所述，为了在移动端让页面获得更好的显示效果...，缩小和放大的比例，我们通过 window.screen.width / 750 (设计稿大小) 来获取，然后动态的设置到meta标签上。...，那就是不能设置一个最大宽度的阀值，只能跟着浏览器视图大小的改变而变化，这样对于一些想要在pc和h5都要正常展示的项目不太友好1.4.5 针对刘海屏的兼容针对iphoneX以上具有刘海屏的机型，也有对应的适配方案...: 可视窗口完全包含网页内容cover：网页内容完全覆盖可视窗口默认情况下或者设置为auto和contain效果相同。...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。

    7.6K92
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券