首页
学习
活动
专区
工具
TVP
发布

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

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

1.4K40
您找到你想要的搜索结果了吗?
是的
没有找到

怎么设置table(表格)手机自适应宽度

我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验。...以下面这个表格为例: 表格范例-周杰伦jay专辑《范特西》专辑曲目 正确的(自适应宽度)代码如下: 周杰伦jay专辑《范特西》专辑曲目 经常见到的非自适应宽度的代码...,也就是在移动会撑破列宽的代码则是: <table style="height: 125px;" border="1" width="640" cellspacing="0" cellpadding=...做到这两点之后,你table(表格)在任何情况下都可以很好的自适应宽度显示了。

3.4K20

移动页面按手机屏幕分辨率自动缩放的js

,在页面头部加入以上一段js之后,在手机就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度,750是按iphone6来设计(根据自己使用需求来修改...),即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机的效果。...试想,浏览器如果把电脑的980px的网页展现在宽度为750px的iphone6手机屏上,势必会放不下,手机横向会出现滚动条,怎么阻止这种情况呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如...,当然这样的话必须缩放,这就是为什么在手机中展现电脑页面没有出现横向滚动条,而且字迹明显变小的原因。...target-densitydpi=device-dpi可以强制内核以480DPI排版,使画面更精细,window.innerwidth也将为屏幕宽度1080.

5.3K80

移动网页布局】移动网页布局基础概念 ① ( 移动浏览器 | 移动屏幕分辨率 | 移动网页调试方法 )

一、移动浏览器 ---- 移动浏览器 比 PC 浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom.../ 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动开发适配比较简单 , 兼容主流的浏览器 , 即兼容...Webkit 内核浏览器即可 ; 二、移动屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android...屏幕适配】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp..., 只需要关注 像素尺寸 px 即可 ; 三、移动网页调试方法 ---- 使用 Chrom DevTools 谷歌浏览器开发工具 模拟手机调试 ; 使用 360 极速浏览器也可以使用该开发工具 ; 进入浏览器

2.5K40

移动Web App 的屏幕适配方法(总结)

移动web页面的开发,由于手机屏幕尺寸、分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。...目前像Bootstrap等框架使用这种方式布局 图片便于修改,只需修改css文件 调整屏幕宽度的时候不用刷新页面即可响应式展示 缺点 代码量比较大,维护不方便 为了兼顾大屏幕或高清设备,会造成其他设备资源浪费...,特别是加载图片资源 为了兼顾移动和PC各自响应式的展示效果,难免会损失各自特有的交互方式 04 viewport 缩放 在写页面时,直接使用px, 将页面写死。...important; } } 07 vw和vh 页面中所有的关于大小的设置,都需要以屏幕的大小为准,进行计算,相对复杂 vw和vh是相对于视口的宽度/高度,即: 100vw = 视口的宽度...100vh = 视口的高度 总结:关于移动的适配方法,就总结到这里,欢迎大家参与讨论

1.1K10

移动页面如何优雅的适配各种屏幕,包括PC

本文为Varlet组件库源码主题阅读系列第八篇,读完本篇,可以了解到移动页面如何适配各种尺寸的屏幕,包括pc,另外如何将触摸事件转换成鼠标事件。...移动适配 开发移动页面,我们通常都会按照一个固定宽度的设计稿来做,但是实际上的手机屏幕尺寸五花八门,如果不进行适配的话会比较影响使用体验。...Varlet组件库的设计就是基于375px宽度的设计稿,然后使用postcss-px-to-viewport进行移动适配,这个PostCSS插件会将px单位转换成vw单位,1vw等于1/100的视口宽度...桌面适配 这个适配指的不是尺寸,因为前面已经使用vw解决了尺寸的适配问题,这里主要是指事件,具体来说是我们在移动使用的交互事件一般是touch事件,但是桌面肯定不支持,所以为了让我们的移动组件库不至于在桌面完全无法使用...targetTouches:当前对象上所有触摸点的列表 changedTouches:涉及当前(引发)事件的触摸点的列表 移动触摸点是可能存在多个的,比如我同时好几个手指一起触摸,可以通过这三个列表进行区分

1.8K20

移动H5通过flexible.js+rem自适应适配方案

一、 rem实际开发适配方案 (1)按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小; (2)CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值...原理 手机淘宝团队出的简洁高效移动适配库 它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。...来去算 页面元素大小取值方法 ①最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)) ②屏幕宽度/划分的份数就是html的 font-size的大小 ③或者:页面元素的...rem值=页面元素值(px) / html font-size字体大小 三、使用步骤 技术选型案例 方案:我们采取单独制作移动页面方案· 技术:布局采取rem适配布局 ( flexible.js + rem...页面元素的px值/ 75(750px/75)*/ width: 10rem; margin: 0 auto; } 这样就完成了,然后就可以根据750的设计稿进行在移动开发了

97750

深入浅出之移动屏幕适配(1)

说到移动:可以根据开发技术分,也可以根据操作系统来分,今天重点不是这个,是讲下使用CSS与Android如何进行屏幕适配。 1.先来了解几个概念:CSS中的px,em,rem分别是啥东西?...屏幕尺寸:一般听到说手机4.7英寸或者5.2英寸,屏幕对角线的长度,这里还要说明下:1英寸(in)=2.54厘米(cm),因此上面的4.7*2.54=11.93cm。...屏幕比例:对角线长度固定但长宽的长度是不确定的,因此有不同的比例。...其实根据上面讲的几点:屏幕分辨率480*800,屏幕尺寸4英寸,已经可以计算了,(480/4^2)+(800/4)^2开平方根; 那么density的值应该为233/160=1.46  px要怎么算?...参考:dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算

977100
领券