文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

移动端两端对齐 + 图片宽度自适应

自适应四宫格 有这样一张设计稿，左右两边白色间距为4px，中间间距为10px，每一行的两张图是等宽的（即平分去掉间距后的宽度） 有一种方法是和设计师商量，把所有的具体尺寸改为百分比尺寸。。...这个布局不太好写的主要原因是，在宽度上，百分比（50%）与实际尺寸（4px 10px）混杂，所以做到宽度自适应的话会有困难。...下面是正经的一种写法： 图片单元float，宽度设置为50%，奇数单元设置margin-right为10px, 偶数单元设置margin-right为-10px。...父元素设置左padding为4px，右padding为14px，父元素的padding值正好是所有间距的总和，所以它实际宽度的50%是正好符合需求的图片单元宽度。...偶数单元的负margin（-10px）和父元素右padding（14px）会中和成4px的右边距（实际上是因为元素负margin会使其右边的元素向左移动并被其覆盖） 运营的同学在实际操作中，做的图可能不会很标准

2.2K40

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

一、视口标签设置 参考 【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例...】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css ) 博客下载 normalize.css 文件 ; index.css 要实现的样式文件...在移动端网页布局中 , 网页布局宽度 = 移动设备宽度 , 因此在进行布局时 , 可以为网页布局的主体 标签设置 100% 宽度 ; 2、设置布局最大宽度 将 京东 手机端页面 , 拉倒最大便不再放大..., 如下图所示 , 这是因为该页面设置了最大像素 ; 一般移动端页面最大像素设置为 980 像素 ; 3、设置布局最小宽度 将京东的 手机端 页面宽度压缩到最小 , 如下状态时 , 就不能再进行压缩了..., 这是因为该页面设置了最小宽度 ; 一般设置最小宽度 320 像素 , 智能手机中的屏幕如果是 320 像素 , 这就是最小的手机屏幕了 ; 4、查看网页最大最小宽度 进入京东页面 , 按 F12

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

    关于移动端百分比宽度的几种实现

    本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载 由于移动端的设备宽度各不相同，而且因为竖屏宽度都比较小，所以一般都采用满屏的方式布局，而不像PC端的使用固定宽度居中的技术布局...为了方便各种技术对比，我们使用不同的技术实现同一个四等分满屏，且每个小分为一个正方形的需求。...full-list .item:nth-child(2n){ background: #ccc; } .full-list .item:hover{ background: #f00; } demo效果见： 移动端百分比宽度的几种实现...从这新单位的出现，也知道为了移动端的百分比我们的W3C组织也是操碎了心。 为了上面所说的四等分，那每个的宽度应该为25vw，而我们ul的list--xxx就是list--vw。...这样通过rem与html的font-size的关系，拐了个弯实现了一个相对于视窗宽度的百分比。

    1.1K10

    关于移动端百分比宽度的几种实现

    由于移动端的设备宽度各不相同，而且因为竖屏宽度都比较小，所以一般都采用满屏的方式布局，而不像PC端的使用固定宽度居中的技术布局。...为了方便各种技术对比，我们使用不同的技术实现同一个四等分满屏，且每个小分为一个正方形的需求。...full-list .item:nth-child(2n){ background: #ccc; } .full-list .item:hover{ background: #f00; } demo效果见： 移动端百分比宽度的几种实现...从这新单位的出现，也知道为了移动端的百分比我们的W3C组织也是操碎了心。 为了上面所说的四等分，那每个的宽度应该为25vw，而我们ul的list--xxx就是list--vw。...这样通过rem与html的font-size的关系，拐了个弯实现了一个相对于视窗宽度的百分比。

    1.3K90

    纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局——高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓...需要的效果,如下图: 需求分析 看图,其实很简单.如果宽度是固定的,那么这个布局就不要太简单了. 问题是,设备的宽度是不固定的哦,那么问题就是,在不知道具体宽度的时候,如何来设定它对应的高度呢?...也就是说,如何在CSS中,找到一个高度和宽度挂钩的属性.只要存在这个参数,那么,问题就能解决. 那么有没有这个参数呢?...有的.那就是padding 代码实践 一般情况下,是想不起来padding有这个特性的.不过,想起来了,那么这个问题就迎刃而解了,看代码吧. HTML结构 <!

    2.3K10

    微信小程序|vant-dist的引用与屏幕宽度的获取

    在开发微信小程序时，我们插入图片或设置样式是不会随着模拟器型号的改变而随着模拟器屏幕宽度而改变的，如下图（注意模拟器型号的变化）： ? ?...图1 未获取屏幕宽度的轮播图 那要调用怎样的代码才能获取到屏幕宽度呢？...2.2 获取屏幕宽度的代码： Js-date代码： a: 0,//将屏幕宽度赋值（任意） Js-onload-function代码： let screenWidth = wx.getSystemInfoSync...().screenWidth;this.setData({a: screenWidth})//修改给屏幕宽度赋的值 wxml代码： 屏幕宽度后轮播图效果 结语 对于从外部引入的vant-dist插件中有许许多多代码，还需要多多实践，根据需要从中调用。在开发微信小程序时对于模拟器的屏幕宽度的获取是必要的。

    2K10

    【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

    , 如果子元素横向累加宽度超过 当前宽度 , 会自动换行 , 因此这里为每个子元素设置一个 1/3 宽度 , 即 33.33% ; 子元素 设置浮动和宽度的样式如下 : .brand div...*/ width: 33.33%; } 5、设置图片宽度自适应 上述布局中 , 图片自动充满父容器 , 为 标签设置 100% 宽度 , 设置图片后 , 会按照宽高比等比例缩放 ;...= 设备宽度 */ width: 100%; /* 最小宽度 320 像素 */ min-width: 320px; /* 最大宽度 640 像素 */ max-width.../ 设备宽度 的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */...nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */

    5.8K20

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    一、多排按钮导航栏样式及核心要点 1、实现效果 要实现下面的导航栏效果 ; 2、总体布局设计 该导航栏可使用 10 个 标签盒子 进行制作 ; 该导航栏的宽度自动充满整个屏幕 , 宽度为..., 宁可少 1 像素 , 也不能多 1 像素 , 如果设置浮动后 , 宽度超过了布局宽度 , 则会自动换行 ; 3、设置浮动及宽度 该布局距离上面的布局有 5 像素的上外边距 ; 如果要令 10 个坐标...= 设备宽度 */ width: 100%; /* 最小宽度 320 像素 */ min-width: 320px; /* 最大宽度 640 像素 */ max-width.../ 设备宽度 的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */...nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */

    7.5K40

    【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

    */ width: 100%; /* 搜索栏的高度为 44 像素 */ height: 44px; /* 搜索栏最小宽度 320 像素 浏览器拉倒最小 该布局的宽度不低于...100% */ width: 100%; } 设置了 100% 宽度 , 界面布局就会随着设备宽度进行变化 ; 设备宽度宽时 , 样式如下 : 设备界面变窄时 , 界面如下 : 二、完整代码示例...= 设备宽度 */ width: 100%; /* 最小宽度 320 像素 */ min-width: 320px; /* 最大宽度 640 像素 */ max-width.../ 设备宽度 的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */...nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */

    4.2K20

    【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 cover contain 值 )

    或 高度 的其中一个达到父容器的尺寸 , 就不再进行拉伸 , 盒子模型部分内容可能显示空白 ; background-size 值设置一个值的情况 : 只设置宽度像素值 : 宽度设置为 500 像素..., 高度根据该宽度等比例缩放 ; background-size: 500px; 只设置宽度百分比值 : 宽度占父容器的 100% , 高度根据该宽度等比例缩放 ; background-size:.../ 高度 的 像素值 / 百分比值 如果为盒子模型 同时设置了 宽度 和 高度 像素值 , 则 图片的宽度和高度分别进行拉伸 , 以达到样式中定义的宽高值 , 宽高不会等比例拉伸 ;...的 像素值 / 百分比值 代码示例 : 设置宽度百分比值 : 宽度先充满了屏幕 , 就停止了拉伸 , 底部部分内容没有覆盖到 ; 代码示例 : <!

    2.2K20

    CSS(八)

    并会介绍移动优先的响应式设计。 概述 响应式设计指的是网站可以在不论是宽屏显示器还是移动设备都能表现得同样出色。这是一种网页设计和开发方法，它消除了网站的移动版本与桌面版本之间的区别。...流式布局 流式布局是一种拉伸和缩小以填充屏幕宽度的布局，如之前我们介绍过的 Flexbox 布局一样。 弹性媒体 不同的设备有不同的图像要求。HTML 提供了为用户设备选择最佳图像的方法。...它定义了一系列媒体查询以及媒体查询生效时图像的渲染宽度。 上面的例子中，当屏幕宽度至少为 960 像素时，图像也将是 960 像素宽。...所谓移动优先，即优先考虑移动设备的样式，在非移动设备中进行响应式适配，这样做的好处是既可以在移动端有更好的表现，又能够在其他设备看到适配后的页面。...当然很多 Web 开发并不是移动优先的设计，做响应式网页的时候如果先开发的 PC 端，再进行移动适配，这就是 “PC 优先”。

    1.2K30

    【移动端网页布局】移动端网页布局基础概念 ⑩ ( CSS3 盒子模型 box-sizing | 盒子模型尺寸 = 内容尺寸 = 内边距 + 边框宽度 | box-sizing 样式设置 )

    一、CSS3 盒子模型 box-sizing 参考 【CSS】盒子模型内边距 ④ ( 盒子模型内部尺寸计算 - 内容尺寸、内边距、边框宽度 | 盒子模型尺寸 = 内容尺寸 + 内边距 + 边框宽度 )...博客 , 传统的盒子模型计算公式如下 : 盒子模型尺寸 = 内容尺寸 + 内边距 + 边框宽度 CSS3 盒子模型中 , CSS 设置的盒子宽度 ( width ) 包含了 边框 ( border )...和 内边距 ( padding ) , 在 CSS3 中 width 是总宽度 , 而不是内容宽度 , 边框 和 内边距 不会撑大盒子 , CSS3 中的盒子尺寸公式如下 : 盒子模型尺寸 = 内容尺寸...= 内边距 + 边框宽度 CSS3 中可以设置盒子模型的类型 : 传统盒子模型 : 设置如下样式 可以将 盒子模型设置为 传统盒子模型 ; box-sizing: content-box; CSS3...盒子模型 : 设置如下样式 , 将盒子模型设置为 CSS3 盒子模型 ; box-sizing: border-box; 盒子模型选择 : 移动端 : 直接使用 CSS3 盒子模型 ; PC 端 :

    1.4K30

    01_移动端布局基础

    1 移动端布局基础 虽然 H5 的页面与 PC 的 Web 页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。...1.2 移动Web开发主流方案 1.2.1 单独制作移动端页面 单独制作移动端页面，通常的做法是不改变原有的PC端页面，然后针对移动端单独开发出一套特定的版本。...布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...屏幕分辨率是指一个屏幕上可以显示多少信息，通常以像素（px）为单位来衡量。在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。...不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。

    2.5K10

    【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 是否允许用户缩放 初始缩放比例 最小缩放比例 最大缩放比例 )

    通过设置正确的 meta 标签，可以使网页在不同设备上具有相同的理想视口大小和布局。...默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; 推荐视口标签写法 : 所有的手机端网页都设置如下样式 ; 宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; 代码示例 : 端浏览器正常显示 ; 移动端浏览器显示效果 : 如果 不设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示...: PC 端浏览器正常显示 ; 移动端浏览器显示效果 : 设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 设备宽度 , 是理想视口 ; body 中的文本 显示正常 ;

    5.9K21

    前端工程师之 移动端布局基础

    1 移动端布局基础 虽然 H5 的页面与 PC 的 Web 页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。...1.2 移动Web开发主流方案 1.2.1 单独制作移动端页面 单独制作移动端页面，通常的做法是不改变原有的PC端页面，然后针对移动端单独开发出一套特定的版本。...布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...屏幕分辨率是指一个屏幕上可以显示多少信息，通常以像素（px）为单位来衡量。在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。...不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。

    1.7K10

    前端移动web-day04学习笔记

    01-响应式布局与媒体查询 1.响应式布局介绍 ：一个HTML页面适配多个不同的设备（手机，ipad,PC） 优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）...（2）使用媒体查询根据设备尺寸覆盖默认样式 1.1-响应式布局介绍 1.响应式布局：一个页面适配多个不同终端（pc、移动端、平板端） 2.响应式布局核心原理：根据不同的屏幕尺寸加载不同的样式 25个经典的响应式布局网站...缺点：不便于维护:需要写大量的css代码，相当于把PC端和移动端的css代码写到一个文件中，然后根据屏幕尺寸加载对应的代码。.../，技术专题类http://www.bootcss.com/ 不适合：网页结构复杂:比如电商类(京东、淘宝、天猫)，这些网站由于结构很复杂，使用响应式开发维护起来特别麻烦，反而是做两套页面分别适配PC端与移动端更方便...端和移动端 1.2媒体查询 1.作用：媒体查询@media是css3中新增的功能，它的作用是可以针对不同的媒体类型定义不同的样式 课外学习传送门：http://www.runoob.com/cssref

    1.5K30

    探讨移动端适配

    所以，有如下公式： DPR = 设备像素/CSS像素 了解上面的东西后接下来我们来探讨移动端的适配问题 注意在不同的屏幕，单位像素的大小是不同的，像素越小屏幕越清晰，智能手机的像素点是远远小于显示器的像素点的...这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好 这也就是我们常说的布局视口 完美视口（理想视口） 默认情况下 移动端的像素比为...980/移动端宽度 布局视口带来的问题是 如果我们直接在网页中编写移动端代码，在980的视口下像素比是非常不友好的 也就是 1px =0.几物理像素，这样就会导致网页中的内容非常非常小 因此在编写移动端页面时...用户是否可以缩放 移动端布局适配解决方案 rem+flexible rem+css预处理+媒体查询与rem+flexible.js做网页适配 vw，vh 1.vw：1vw等于视口宽度的1% 2....vh：1vh等于视口高度的1% 如100vw 在视口宽度为 375px大小时渲染处理的盒子宽度为 375px vw,vh与百分比不同的时vw,vh永远相当于视口的宽度，而百分比是相当于父元素的宽度

    2.7K10

    供应链可视化开发实战 | 跨终端响应式数据看板：移动端到PC端全适配

    图表容器div的宽度设为100%，使其充满父容器，高度可根据需求固定或由外部传入。3.2 图表配置动态调整 不同屏幕下，不仅图表大小要变，其内部配置（如是否显示图例、标签密度）也应优化。...系列标签：在移动端隐藏柱状图上的数据标签，保持图表清爽。四、数据加载与性能的响应式优化 不同网络环境与设备性能差异巨大，需实施差异化数据加载策略。...五、移动端专属交互优化 小屏幕空间有限，交互方式需从鼠标悬停转向触控优先。5.1 触控友好的导航与操作 使用底部导航栏、手势滑动等移动端常见模式。...构建了灵活的响应式网格布局组件，可根据屏幕宽度动态调整列数与间距，确保信息在不同屏幕下均能有效组织。...实施了差异化的性能优化策略，包括按设备加载不同复杂度组件、响应式数据分页，兼顾了移动端的加载速度与桌面端的数据丰富性。

    66840
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券