html{ font-size:1mm; } .titleheight{ height:10rem; //这里等于10mm width:11rem; //这里等于11mm }
电脑版的商城昨晚做完了，今天赶着做手机端的，提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度，保证在不同手机上都能正常显示给用户，我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好，但里面的各种样式我利用的很少，最多用到它排版，当网站最后上传的时候你会发现，即使压缩之后，它也会占用相当大的一部分，所以这次我想自己用原生写，响应式开发（我现在知道的尚浅）目前我了解有
原文：A tale of two viewports — part two 译者：nzbin 在这个迷你系列中，我将解释 viewports 和各种重要元素的宽度是如何工作的，比如说 <html> 元素，窗口以及屏幕。 我们将在本页讨论移动浏览器。如果你是刚刚接触移动端，我建议你首先阅读关于桌面浏览器的第一部分。这会让你在熟悉的环境中循序渐进。 移动浏览器的问题 手机浏览器与桌面浏览器的最大不同就是屏幕尺寸。对于一个基于桌面优化的网站，移动浏览器的显示效果明显不如桌面浏览器，要么缩小后
在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。
刚刚又把携程的案例做了一遍,发现还是有问题的,虽然说子盒子为弹性容器的时候,虽然是没有行内元素和块级元素的区别了,但是当里面没有内容的时候,设置了大小也还是不生效的.案例自己做的时候发现也没那么麻烦啦,只是刚学习了新的知识点 , 所以写起来还是比较慢的.
现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却能够显示宽度为980像素的网页，自然而然，网页会被缩小。
很多的公司目前的网站仍然是只有电脑版的网站，在手机上无法良好的展示，在智能手机上网越来越普遍的趋势下，公司网站具备移动友好性，在手机上具有良好展现的特性是非常重要的。而如何解决公司网站在手机端良好展示的实际需要呢。下面是两种解决方案，可供需要的公司参考。
PC端页面的网页重构，我们使用最多的单位是px。因为在PC端，大部分页面效果我们都可以设置成固定尺寸，但是在手机端，这种方案是不可行的，我们必须要按照百分比呈现页面，才能保证网页在任何设备上可以正常显示。
0. 前言 手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者
@media mediatype and | not lonly (media feature) {
手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。
手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。
优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）
前言 一直以来，对手机屏幕尺寸、分辨率、像素和像素密度之间对关系摸不到头脑，今天就借此机会，学习记录一下啦。 屏幕（主屏）尺寸是什么，怎么算？ 平时我们买手机，都有尺寸多大，比如苹果6s是5英寸的，华为p8是5.2英寸的，那么这个数字是怎么来的呢？开始以为是屏幕的面积大小，后来通过查询资料才知道，英寸是长度大小，不是面积单位，所以当然不是屏幕的面积咯。其实手机的尺寸其实代表手机屏幕的对角线长度。英寸和厘米的换算公式是： **1英寸（inch）=2.54厘米（cm）** 分辨率是什么？ 比如我们看苹果6s的分辨率是1920PX*1080PX，这代表什么呢？ 我们看到单位是PX，PX就是我们熟悉的像素，也就是苹果6s手机屏幕是由1920乘1080个像素组成的，1920代表的是手机纵向，1080代表的是手机的横向。 什么是屏幕像素密度？ 屏幕像素密度，即每英寸屏幕所拥有的像素数，英文简称PPI。在读到这个每英寸屏幕时，我曾经深深的疑惑，这个每英寸是不是每平方英寸的简称呢？事实证明，我还是太年轻，这个英寸跟之前手机屏幕的尺寸一样，也是对角线的长度。所以，我们可以这么理解屏幕像素密度，即在一个对角线长度为1英寸的正方形内所拥有的像素数。 ####屏幕像素密度，分辨率，屏幕尺寸之间的关系是什么？ 这三个专业名词之间，有着非常严谨的关系。为啥说严谨呢，因为这三者之间，有一个公式可以表示。
在写HTML、CSS对设计稿进行还原时不关注屏幕尺寸的差异，而是直接按设计稿的标注来开发。比如设计稿里标注的文字字号是30px，CSS里就设置文字字号30px。
这个是bootstrap的中文文档网站，大家可以用chrome浏览器来模拟手机端的浏览效果，可以看到手机端和电脑端访问同一个网页时，都能获得比较好的浏览体验。也就是说，一套代码可以同时适应多个设备。这样的网页就是响应式网页。
Label加载富文本 func getHtml(){ guard let filePath = Bundle.main.path(forResource: "demo", ofType: "h
假设 html 的 font size = 1px 的话，就可以写 28 rem 了，更方便了，但是浏览器对字体大小有限制，设为 1px 的话，在浏览器中是失效的，会以 12px（或者其他值） 做一个计算 , 就会得到一个很夸张的结果，所以可以把 html 写的大一些。
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。
CSS3中有两个新尺寸单位vw和vh， 这两个单位非常适合于开发移动端自适应页面。 假如说有一个设计师做了一张1136x750px的页面，这长页面是针对iPhone6的屏幕设计的。 前端开发工程师将这张设计稿转换成网页， 网页中所有的元素尺寸都用px硬编码， 那么这张网页在iPhone6中能跑的好好的，但是到了其他手机中会容易出问题， 毕竟很多手机的屏幕尺寸和iPhone6是不一样的。 vw和vh就是用来解决这个问题的。它们是一组相对尺寸单位，和百分比相似， 1vw和1vh其实和1%是一样的。换句话说， 不
即像素，1px代表屏幕上一个物理的像素点；偶尔用到px的情况，是需要画1像素表格线或阴影线的时候。
但手机的屏幕是大小不一的, 在iPhone8上展示的很好的效果, 在iPhone5s上可能就完全走了样, 为了在不同尺寸的屏幕上,都有很好的展示效果, 我们需要对网页进行缩放
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
手机屏幕的分辨率越来越高，比如iPhone 5为640*1136 px、iPhone 6/6S为750*1334 px。我拿到的UI图，其参考分辨率为1440*2560 px。
在学习 Android UI 开发的初期，经常被一些常用概念如 dp、sp 和它们与 px 的换算等虐，要避免被虐，最好的方法当然是知其所以然，再见到它们就胸中有料心不慌了。
举例如 iphone6 手机，屏幕分辨率为 1334×750，浏览器分辨率为 667×375，它们的单位都是像素，但是很明显在 mobile-web 开发中，我们只考虑浏览器分辨率，而不考虑屏幕分辨率。我们把浏览器的可视区域称为 visual-viewport，但是某些网站会因为可视区域过窄而产生各种各样的显示错乱，所以浏览器会在默认情况下把 viewport 设为一个较大的值，这样的话那些没有考虑响应式设计的网页也可以在手机端正常显示了（像在 PC 端显示得一样），我们把这个虚拟的窗口称为 layout-viewport，下文中省略为 viewport。
上一篇中介绍了旺财云库存管理系统的基本功能和定价体系，时隔一个多月，忙着种子用户的一些上线支持，还有软件著作权等。这一篇来介绍一下，想要用起来、用得好软件，还需要哪些必要的硬件支持。
移动端web页面的开发适配一直是前端开发津津乐道的话题，在实际开发过程中，移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因，下文的方案是团队选择的能较好满足当前项目需求的方案，已经经过线上用户的考验，但不一定是当下最完美的移动端适配解决方案。下文来详细介绍该方案选型。
响应式网站完全采用全网3合1建站方式，实现一个后台多种终端兼容展示，所有访问终端统一访问地址，响应式网站建设的解决方案对于多终端的兼容展示是重点，接下来小编为你详细分享什么是响应式网站建设以及实用的解决方案，一起来看看吧。
当前Android 的设备多种多样，它们有着不同的屏幕尺寸和像素密度。各应用为了保证可以在各机型上展示较好的交互界面，就需要在实现阶段根据对应的尺寸单位进行兼容性开发。近期在实际项目过程中，小编接触到了一些尺寸度量单位，下面进行简单的总结。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间，或者在各种屏幕上都有一个较好的体验，出现了网页设计的概念，自适应的概念，也就是随着屏幕尺寸的不同能够适配各种内容
rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。
比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px.
HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport（视口） 参考答案 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> width=device-width 是设置视口宽度为设备的宽度，还可以固定视口的宽度，例如： width
虽然网上有很多这种资料，但是太过于复杂，每个人的说法都不一样，看的让人云里雾里的，我总结了一下，不知道对不对！
1、屏幕相关概念 1.1分辨率 是指屏幕上有横竖各有多少个像素 1.2屏幕尺寸 指的是手机实际的物理尺寸，比如常用的2.8英寸，3.2英寸，3.5英寸，3.7英寸 android将屏幕大小分为四个级别（small，normal，large，and extra large）。 1.3屏幕密度 每英寸像素数 手机可以有相同的分辨率，但屏幕尺寸可以不相同， Diagonal pixel表示对角线的像素值（=），DPI=933/3.7=252 android将实际的屏幕密度分为四个通用尺寸（low，medium，high，and extra high） 一般情况下的普通屏幕：ldpi是120dpi，mdpi是160dpi，hdpi是240dpi，xhdpi是320dpi 对于屏幕来说，dpi越大，屏幕的精细度越高，屏幕看起来就越清楚 1.4密度无关的像素（Density-independent pixel——dip） dip是一种虚拟的像素单位 dip和具体像素值的对应公式是dip/pixel=dpi值/160,也就是px = dp * (dpi / 160) 当你定义应用的布局的UI时应该使用dp单位，确保UI在不同的屏幕上正确显示。 手机屏幕分类和像素密度的对应关系如表1所示 手机尺寸分布情况（http://developer.android.com/resources/dashboard/screens.html）如图所示， 目前主要是以分辨率为800*480和854*480的手机用户居多 从以上的屏幕尺寸分布情况上看，其实手机只要考虑3-4.5寸之间密度为1和1.5的手机 2、android多屏幕支持机制 Android的支持多屏幕机制即用为当前设备屏幕提供一种合适的方式来共同管理并解析应用资源。 Android平台中支持一系列你所提供的指定大小（size-specific）,指定密度（density-specific）的合适资源。 指定大小（size-specific）的合适资源是指small, normal, large, and xlarge。 指定密度（density-specific）的合适资源，是指ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high). Android有个自动匹配机制去选择对应的布局和图片资源 1）界面布局方面 根据物理尺寸的大小准备5套布局: layout(放一些通用布局xml文件，比如界面顶部和底部的布局，不会随着屏幕大小变化，类似windos窗口的title bar), layout-small(屏幕尺寸小于3英寸左右的布局）， layout-normal(屏幕尺寸小于4.5英寸左右）， layout-large(4英寸-7英寸之间）， layout-xlarge(7-10英寸之间） 2）图片资源方面 需要根据dpi值准备5套图片资源: drawable：主要放置xml配置文件或者对分辨率要求较低的图片 drawalbe-ldpi:低分辨率的图片,如QVGA (240x320) drawable-mdpi:中等分辨率的图片,如HVGA (320x480) drawable-hdpi:高分辨率的图片,如WVGA (480x800),FWVGA (480x854) drawable-xhdpi：至少960dp x 720dp Android有个自动匹配机制去选择对应的布局和图片资源。 系统会根据机器的分辨率来分别到这几个文件夹里面去找对应的图片。 在开发程序时为了兼容不同平台不同屏幕，建议各自文件夹根据需求均存放不同版本图片。 3、AndroidManifest.xml 配置 android从1.6和更高，Google为了方便开发者对于各种分辨率机型的移植而增加了自动适配的功能 <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:anyDensity="true"/> 3.1是否支持多种不同密度的屏幕 android:anyDensity=["true" | "false"] 如果android:anyDensity
模板名字为：Yodu 有毒，优读，有读，有毒是因为这是一个代码全是我自己弄的模板，可能会有很大的问题；优读是想让自己能够更好的阅读别人的一些优秀文章；有读是希望更多的人能够阅读更多的书籍作品来积累内含。
那么在移动端为什么是 980 而不是其他的值呢，因为过去网页的版心都是 980，乔老爷子为了能够让网页在移动端完美的展示, 所以将 iOS 手机视口的大小定义为了 980，后来谷歌也觉得这是一个非常牛 X 的方案, 所以 Android 手机的视口也定义为了 980。
每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含
手机网站顾名思义，它就是指专门供给手机用户访问和浏览的网站，由于使用手机上网的人数数以万计，所以建设手机网站是具有价值的事情，手机网站里面要包含文字信息、图片信息等内容，手机网站该怎么建设呢？怎样优化手机网站？
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根据这个根植,来设置rem单位的样式.这样虽然解决了很多的问题.但是在面对不同宽度的手机的时候,还是需要去自适应设置很多的内容.当然,因为手机分辨率的不同,我们可以自由的将页面设置在320(iphone5s)-414(iphone6plus)这样的范围内还是很合适的.但是,奇葩手机年年有,华为meta8这款奇葩手机的缩放居然是2.5倍,也就是说,它的宽度居然是432,这样一来,我自适应的页面上的内容就显得有些小了.
移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 :
Android开发为适配不同屏幕需要在资源文件中添加多套图片或者多套布局文件，这篇文章讲解多套图片。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
