⑴ react native里webview怎么设置高度自适应
WebView只要设置了高度就可以正常滚动，所以我们可以在URL里面加hash的方法让react得到WebView的高度。
我的情况是WebView是HTML代码，如果是URL类似：
WebView内代则告码：
window.onload = function(){
var height = document.body.clientHeight;
window.location.hash = '#' + height;
}
React：
<WebView
javaScriptEnabled={true}
source={{ html: your_html }}
style={{ height: this.state.WebViewHeight }}
onNavigationStateChange={(info)=>{
this.setState({
WebViewHeight:info.url.replace('about:blank%23',''搏敏)/1
})
}}
/>
页面加载孙银明后，webview内的JS代码获取自己的高度，添加一个hash给自己的URL，React当感知到webview加载状态变化后，读取这个hash值，传递给this.state.WebViewHeight，从而改变WebView的高度。
⑵ 如何获取webView的高度
如果要获哪汪斗李磨取高度，在上面增加
_webview.delegate = self;
再增加方法
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//在这个方法中取陵贺高度
}
⑶ Web 页面采用多大的宽度最合适
Web 页面采用多大的宽度最合适
网页设计标准尺寸：
1. 800×600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2. 1024×768下，网页宽度保持在1002以内，如果满框显示的话，高度是612눯之间，就不会出现水平滚动条和垂直滚动条。
3. 在ps里面做网页可以在800×600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740×560左右。
网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计.
网页的尺寸受限于两个因素:一个是显示器萤幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软体,就是我们常用的IE,遨游,Friefox等.
高度：
高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被外挂占了半个萤幕，所以高度没有确切值。
宽度:
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001
注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
所以如果是1024的分辨率，你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计.
如果是800的分辨率一般都设成770。但也有设成760的.
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了外挂或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右.
网页设计标准尺寸:
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右
4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.
页面标准按800*600分辨率制作，实际尺寸为778*434px
页面长度原则上不超过3屏，宽度不超过1屏
每个标准页面为A4幅面大小，即8.5X11英寸
全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px
另外120*90，120*60也是小图示的标准尺寸
每个非首页静态页面含图片位元组不超过60K，全尺寸banner不超过14K
标准网页广告尺寸规格
一、120*120，这种广告规格适用于产品或新闻照片展示。
二、120*60，这种广告规格主要用于做LOGO使用。
三、120*90，主要应用于产品演示或大型LOGO。
四、125*125，这种规格适于表现照片效果的影象广告。
五、234*60，这种规格适用于框架或左右形式主页的广告连结。
六、392*72，主要用于有较多图片展示的广告条，用于页首或页尾。
七、468*60，应用最为广泛的广告条尺寸，用于页首或页尾。
八、88*31，主要用于网页连结，或网站小型LOGO。
广告形式 画素大小 最大尺寸 备注
BUTTON 120*60(必须用gif) 7K
215*50(必须用gif) 7K
通栏 760*100 25K 静态图片或减少运动效果
430*50 15K
超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果
巨幅广告 336*280 35K
585*120
竖边广告 130*300 25K
全屏广告 800*600 40K 必须为静态图片，FLASH格式
图文混排 各频道不同 15K
弹出视窗 400*300(尽量用gif) 40K
BANNER 468*60(尽量用gif) 18K
悬停按钮 80*80(必须用gif) 7K
流媒体 300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放时间 小于5秒60帧(1秒/12帧)
网页中的广告尺寸
1.首页右上，尺寸120*60
2.首页顶部通栏，尺寸468*60
3.首页顶部通栏，尺寸760*60
4.首页中部通栏，尺寸580*60
5.内页顶部通栏，尺寸468*60
6.内页顶部通栏，尺寸760*60
7.内页左上，尺寸150*60或300*300
8.下载地址页面，尺寸560*60或468*60
9.内页底部通栏，尺寸760*60
10.左漂浮，尺寸80*80或100*100
11.右漂浮，尺寸80*80或100*10
1.65主频的cpu用多大的 显示卡 最合适 还有 多大的记忆体 最合适
您好。 建议您 用128MB的显示卡 和1G记忆体 本身您的CPU主频就不是很高 如果用好点的显示卡 和高点的记忆体 就浪费了
橱柜拉篮宽度选择多大最合适？
橱柜拉篮一般是根据您家橱柜吃尺寸来定做的，深度42cm的常用橱柜拉篮尺寸：600柜体为52.3*14cm，700柜体为62.3*14cm，750柜体为66.6*14cm，800柜体为72.3*14cm等，深度45.5cm的常用橱柜拉篮尺寸(：600柜体为56.5*20cm，700柜体为66.5*20cm，750柜体为71.5*20cm，800柜体为76.5*20cm等
淘宝手机详情页面宽度到底多少最合适咧？
手机萤幕尺寸有大有小，宽度480 – 620画素会比较合适。格式为JPGGIFPNG。当需要在图片上新增文字时，中文字型大于等于30号字，英文和阿拉伯数字大于等于20号字。
4.2米宽的客厅用多大的电视最合适
电视距离适宜在3米左右，根据沙发到电视的距离来决定。
1.7米使用26英寸
2米使用32英寸
2.4米使用37英寸
2.5米使用40英寸
2.7米使用42英寸
3米使用46英寸
3.3米使用52英寸
用多大的鱼缸养银龙最合适
按尺寸来说 最小尺寸是一米 宽40 银龙体长不得超过40 如果银龙体长超过50 就建议一米二宽50以上的缸子养了 一米五 一米八 两米都能养 越大越好呗
金毛用多大的狗窝最合适
如果你养的是金毛犬，那就更该如此了，要让它知道，白天当然不用说，夜晚这就是它睡觉的地方，不许它想在哪儿睡就在哪儿睡。
对于金毛犬来说，给它指定了一个住处，让它在想躺的时候也能随便在那儿伸伸腰，也算比较自在。
狗屋没必要十分讲究，只要宽敞就好。其实用个纸箱子或者木箱子在上面铺块毛巾也行。若买商店里卖的狗屋，则有条件在客人来访前，事先将金毛犬关起来，的确很方便。
狗屋应放置在安静、偏暗点儿的地方，最好选在冬暖夏凉、通风避晒之处，可能的话冬季和夏季应选在不同的地方。
也可以用铁笼子代替狗屋
要是你们家足够敞的话，也可以在屋里准备一个铁笼子，里面同时可以放上便器和金毛犬睡觉的窝。有一种能摺叠的铁笼子，可以很方便地拆运安装，天气好时还可以把金毛犬连笼子挪到院子里晒晒太阳。
中星九号用多大的锅最合适
目前用小锅接收中星9号的人占百分之九十九以上，因为它上面有免费的46套央视及省级卫视节目。其它卫星如亚太5号、新天11符和韩星5号上面节目少，也没有多大的收看价值。最小的小锅直径35厘米左右。 中星9号位于西南方向.应该影响不大。
86用多大轮胎最合适
1.抓地力增加。2。增加车身高度，3增加行车稳定性。4.油耗增加。5。对轮毂，内衬，转向角度，有影响!
⑷ react native里webview怎么设置高度自适应
webview中右下角的缩放按钮能不能去掉
settings.setDisplayZoomControls(false); //隐藏webview缩放按钮让Webview加载的页面居中显示咱知道的几种方法
第一种方法：
WebSettings settings = webView.getSettings();
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
LayoutAlgorithm是一个枚举用来控制页面的布局，有三个类型：
1.NARROW_COLUMNS：可能闭颂的话使所有列的宽度不超过屏幕宽度
2.NORMAL：正常显示不做任何渲染
3.SINGLE_COLUMN：把所有内容放大webview等宽的一列中
用SINGLE_COLUMN类型可以设置页面居中显示，页面可以放大缩小，但这种方法不怎么好，有时候会让自己高稿的页面布局走样而且咱测了一下，只能显示中间那一块，超出屏幕的部分都不轿念郑能显示。第二种方法：
//设置加载进来的页面自适应手机屏幕
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
第一个方法设置webview推荐使用的窗口，设置为true。第二个方法是设置webview加载的页面的模式，也设置为true。
这方法可以让自己的页面适应手机屏幕的分辨率，完整的显示在屏幕上，可以放大缩小。
两种方法都试过，推荐使用第二种方法第三种方法：（主要用于平板，针对特定屏幕代码调整分辨率）
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int mDensity = metrics.densityDpi;
if (mDensity == 120) {
settings.setDefaultZoom(ZoomDensity.CLOSE);
}else if (mDensity == 160) {
settings.setDefaultZoom(ZoomDensity.MEDIUM);
}else if (mDensity == 240) {
settings.setDefaultZoom(ZoomDensity.FAR);
}
⑸ 网页设计，一般最少要设置多少高度
大概的高度为：
Window XP首屏大小580 px
Window 7 首屏大小710 px
具体原因如下：
一个网页的尺寸设置和浏览器与系统的尺寸大为相关，我们不可能满足所以用户的最佳尺寸，但我们能做的是让绝大多少用户感觉是最佳的。
系统分辨率统计：
对大于30W台客户端用户进行测试，得到的测试数据如下（数据来源于网络）：
⑹ 如何监测WebView的高度
1. 通过webview的didFinishLoad:方法，这个时拿袭模候webview已经加载完成，可以获得真禅穗实高度。消缓
2. 通过js来获取实际页面的高度，获取的时机也通过js来监听。
3. 通过检测webView.scrollView.contentSize，只要这个值发生改变，你马上就能够被通知。
⑺ Web前端面试的常见面试题汇总
今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望则宽本篇文章能够对大家有所帮助。1.渐进增强与优雅降级
渐进增强
并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。
优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。
这两种思想的区别在于：
1.渐进增强是向上兼容，优雅降级是向下兼容;
2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;
3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)
2.DOCTYPE
作用
DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML
的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。
DOCTYPE是用来声明文档类型和DTD
规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。
HTML5的文档类型声明：
HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML
元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
标准模式与怪异模式
怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规好卜范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会友盯穗被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的
DOCTYPE都会触发怪异模式。
浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE
可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。
怪异模式与标准模式的主要区别：
1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:
border-box将标准盒模型转化成怪异模式下的盒模型。
2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。
3.怪异模式下，在表格中的字体样式(如font-size)不会继承。
4.怪异模式下颜色值必须使用十六进制标记法。
3.语义化
HTML5
中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS
样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。
优点
·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。
·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
·方便其他设备解析，如盲人阅读器根据语义渲染网页。
·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
语义化标签
·
·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;
·article
文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;
·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;
·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;
·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站
logo，搜索框(搜索框作为文档的主要内容);
·aside
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
4.超链接伪类
:link、:visited、:active和:hover的声明顺序是怎样的?
:link表示未访问的链接状态;
:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。
推荐顺序是LVHA，即:link:visited:hover:active。理由如下：
·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link
之前声明，那么(:hover)就会被覆盖;
·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited
之前声明，那么(:hover)就会被覆盖;
·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active
样式，因此:active在:hover之后声明;
·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和
:visited两者的顺序无所谓，互不影响。
5.CSS常见的长度单位
CSS中除了px长度单位之外，还有下面几个长度单位：
·pc六分之一英寸，1pc=12pt=1/6*1in=16px;
·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;
·in一英寸，1in=2.54cm=96px;
·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em;
·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;
·rem当用在根元素()的font-size上面时，它代表了它的初始值;
·ch代表元素所用字体font中“0”这一字形的宽度;
·vh1vh相当于视口高度的1%，100vh就是视口的高度;
·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;
·vmax视口高度vw和宽度vh两者中的最小值
·vmin视口高度vw和宽度vh两种中的最大值;
·%相对于父级元素的大小来确定;
参考：CSS
CSSpercentage[2]
6.事件对象
冒泡与捕获
事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。
在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：
·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;
·
然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;
而冒泡与捕获恰恰相反：
·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;
·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;
而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。
addEventListener函数的第三个参数是个布尔值。含义：
·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;
·当布尔值是true时，表示向下捕获触发事件;
不能冒泡的事件
有些事件是不会冒泡的。比如：
·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;
·focus元素获取焦点时触发;
·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;
·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;
事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用
e.target属性可以获取到当前触发事件的子元素。
事件对象中的方法
·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;
·preventDefault()阻止默认事件的发生;
·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div
元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用
stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;
比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click
事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。
paragraph
⑻ 移动端Web页面适配方案（整理版）
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]
移动端web页面的开发，由于手机 屏幕尺寸 、 分辨率 不同，或者需要考虑 横竖屏 问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
早期网页设计采用 静态布局 ，通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备，即 <meta name = 'applicable-device' content = 'mobile'> ，在 <meta> 标签中的 viewport 标签中设置 width ，通过 js 动态修改标签的 initial-scale 使得页面等比缩放，刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用 px 为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。
后面出现 流式布局 ，使用百分比 % 定义宽度，高度使用 px 固定，根据可视区域大小实时进行尺寸调整，通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。
顺应不同页面字体大小展现问题，出现了 弹性布局 。这种布局方案下，包裹文字的元素的尺寸采用 em/rem 为单位，页面主要划分区域的尺寸依据情况使用 px 、百分数或者 em/rem 。如一些高校的网站 jlu ，页面的主要划分区域使用 px 和百分比，包裹文字的元素和文字采用 em 。
上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于 响应式web设计 ，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果，如 mashable 。
[TOC]
像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字，在 1366×768 显示屏下会显示的小，在 1024×768 显示屏下会相对大。也称为 物理像素（设备像素 ），是分辨率的尺寸单位。
印刷行业常用单位，能够使用测量设备测得的长度，等于 1/72 英寸。
在不同屏幕上， css 像素呈现的物理尺寸一致，但 css 像素对应的物理像素具数不同。标准的显示密度下， 1 个 css 像素对应一个物理像素，缩放时， 1 个 css 像素对应的物理像素会减增。是一种 设备独立像素(device independent pixels: DIPs)
像素密度，每英寸所拥有的像素数。值越高，显示画面细节越丰富。计算公式为： ，其中 和 是分辨率的宽高， 是屏幕尺寸。
打印设备每英寸印刷出来的点有多少个，值越高，图片越细腻。
设备物理像素和设备独立像素比 ，即 是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取，css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。
<meta> 标签中定义了一些元数据信息，通过设置 <meta name = "viewport"> ，提供有关 视口初始大小 的信息，供 移动设备 使用。属性值为
移动端涉及 布局视口 （Layout Viewport）、 视觉视口 （Visual ViewPort）和 理想视口 （Ideal ViewPort）。
与移动端web页面适配有关的手机屏幕特性包括
硬件所支持的，屏幕每行的像素 * 每列的像素点数，单位是 px 。
设备独立的，软件可以达到的，个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。
像素分辨率 ÷ 逻辑分辨率等于 倍率 ，如 @3x 表示分辨率的 3 倍。一个已知物理像素大小的元素，如果在普通屏中其设备像素等于 css 像素，但在一些高清屏中，如 Retina 显示屏，一个css像素对应 2 或 3 个设备像素，这时显示出来的元素会变小。为了让元素如期待显示，需要传入 原始设计稿尺寸 × 倍率 的设计稿，根据 DPR 的定义，这样加载后能够达到同样的效果。
手机屏幕对角线长度换算成英寸的大小
贴上 源码 分析
视口 是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口
使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本 ， 布局高宽 ， 间距 等，使得这些元素能够随视口大小自适应调整。以 1080px 设计稿为基准，转化的计算表示为
响应式设计 使得一个网站同时适配 多种设备 和 多个屏幕 ，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器能力而变化），使其视觉合理，交互方式符合习惯。如使得内容区块可伸缩与自由排布，边距适应页面尺寸，图片适应比例变化，能够自动隐藏/部分显示内容，能自动折叠导航和菜单。
⑼ Web前端新手应该知道的CSS长度单位
今天小编要跟大家分享的文章是关于Web前端新手应该知道的CSS长度单位!众所周知CSS技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。
因此，作为网页设计师和前端开肆拦发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。为了帮助大家更好的工作小编今天为大家分享一些css的长度单位，希望能够对小伙伴们有所帮助。
1、rem
我们首先介绍下和我们熟悉的很相似的货。em
被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。
Test