Ⅰ 前端页面缩放技巧
http://www.360doc.com/content/17/1122/10/42241557_706088902.shtml
Ⅱ web前端开发图片放大了不清晰
web前端开发图片放大了不清晰，需要优化浏览器的缩放算法
在网页上通过CSS样式对图片进行缩放从而导致图片模糊，究其原因是因为浏览器的缩放算法和图片处理软件的不同导致的差异。
所以，要解决这个问题，就需要优化浏览器的缩放算法。CSS属性image，rendering正是为此而存在的。CSS 属性用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。
Ⅲ 前端基础：viewports理解、页面各种宽度理解
关于viewports以前一直都是知道个大概但是一直没有详细去了解，加上最近在项目中遇到了比较近点的1像素问题，就乘着这个机会再加深一下印象回顾一下基础。
screen.width/height
含义：用户的屏幕的完整大小。
度量：设备的pixels。
意思就是用户屏幕的物理宽度，它们的值不会随着用户的缩放而改变：它们是显示器的特征，而不是浏览器的特征。换句话说是屏幕出厂的时候就决定了的
window.innerWidth/Height
含义：包含滚动条尺寸的浏览器完整尺寸
度量：CSS的pixels
document.documentElement.clientWidth/Height
含义：viewport尺寸：浏览器窗口尺寸。
度量：CSS的pixels
随浏览器大小变化而变化，但宽度不包含滚动条宽度。具体请看图一比较两者的差别。
viewport的功能在于控制你网站的最高块状（block）容器：<html>元素。怎么理解这句话呢？
假设定义了一个可变尺寸的布局（liquid layout），且你定义一个侧边栏的宽度为width: 10%。当你改变浏览器窗口大小时，该侧边栏会自动扩张和收缩。这是什么原理呢？
技术上讲，原理是侧边栏的宽度为它父元素宽度的10%，我们设它的父元素是body，且你未指定宽度。那么问题就变为了<body>的宽度到底是多少？
通常，一个块级元素占有起父元素的100%的宽度（这里有异常情况，暂时忽略）。所以<body>的宽度就是其父元素<html>的宽度。
那么<html>元素到底有多宽？
<html>的宽度受viewport所限制，<html>元素为viewport宽度的100%。,因为它的宽度恰好为浏览器的宽度。所以你的侧边栏宽度width: 10%会占用10%的浏览器宽度。
反过来，viewport是严格的等于浏览器的窗口：定义就是如此。viewport不是一个HTML的概念，所以你不能通过CSS修改它。它就是等于浏览器窗口的宽度高度 –—— 在桌面浏览器上如此，移动设备浏览器上有点复杂。
注意：当我们设置html上面手动的设置了宽度，在那种情况下document. documentElement. clientWidth/Height依然给出了viewport的尺寸，而不是<html>元素。
比如 我手动设置html的样式为
html {width：2000px;height: 2000px;}
通过document. documentElement. clientWidth/Height 获取到的值只会是viewport的大小，而不是html元素的大小 2000px;
所以document. documentElement. clientWidth/Height只会给出viewport的尺寸，而不管<html>元素尺寸如何改变。
document. documentElement. offsetWidth/Height
含义：<html>的尺寸
度量：CSS的pixels
如果clientWidth/Height一直用以标示viewport的尺寸，我们该如何去获取<html>元素的尺寸呢？通过document.doucmentElement.offsetWidth/Height来获取html的宽度。
像上面的那个例子，这个就会返回2000px;
含义：页面的移位
度量：CSS的pixels
window.pageXOffset 和 window.pageYOffset，定义了页面(document)的相对于窗口原点的水平、垂直位移。因此你能够定位用户滚动了多少的滚动条距离.
对应viewport我们现在普遍理解为两种视图:
1.visualviewport：window.innerWidth/Height定义 包含滚动条
2. layoutviewport: document.documentElement.clientWidth/Height 不包含滚动条
在理解这两种viewport之前，我们先认识理解这几个名词的意思：首先我们要记住： 1 px 就一个像素点
iphone 默认viewport 是980
vw：是Viewport's width的简写,1vw等于window.innerWidth的1%
vh：和vw类似，是Viewport's height的简写，1vh等于window.innerHeihgt的1%
vmin：vmin的值是当前vw和vh中较小的值
vmax：vmax的值是当前vw和vh中较大的值
1. 像素密度 ：每英寸可以显示的像素点的数量，像素密度越大，表示在同样的尺寸里面，像素点越多
比如：iphone 3 的屏幕像素是320x480,iphone4s的屏幕像素是640x960，刚好两倍，然而两款手机都是3.5英寸的。
1英寸是一个固定长度，等于2.54cm。 像素密度越高，代表屏幕显示效果越精细。 Retina屏比普通屏清晰很多，就是因为它的像素密度高。
2.像素： 可以分为物理像素和CSS像素
物理像素（device independent pixels ）： 物理像素也叫设备像素，任何设备的物理像素是固定不变的。比如我的笔记本的分辨率是1366 * 765，表示的就是宽度上最多容纳1366个物理像素点，高度上最多容纳765个物理像素点
CSS像素（CSS pixels ）：CSS像素也叫逻辑像素，是为web开发创造的。通常情况下，在桌面端，CSS像素的大小和设备像素的大小是相等的，即一个CSS像素完全覆盖了一个设备像素。如下图
但是在手机端，我们都知道网页可以通过手指进行缩放，这时候CSS像素也会改变
缩小操作 ：当用户进行缩小操作时，一个物理像素覆盖了多个CSS像素。图中深蓝色表示物理像素，半透明的浅蓝色表示CSS像素
当用户进行放大操作时，一个CSS像素覆盖了多个物理像素 ： 这里的一个css像素就不在等于一个物理像素了。当缩小两倍的时候，两个css像素相当于一个物理像素。
DPR
DPR（devicePixelRatio）指的是设备像素比，即网页在不进行缩放使，设备像素和CSS像素的比值
DPR = 设备像素 / CSS像素(某一方向上)
从iphone4开始，苹果公司推出了retina视网膜屏幕，这种技术在屏幕大小不变的情况下，屏幕像素密度提高了一倍，分辨率自然也提高了一倍，于是DPR等于2
通过JS的screen.width和screen.height属性，可以获取屏幕的CSS像素
通过JS的window.devicePixelRatio属性，可以获取屏幕的DPR值
以iphoneX为例，css像素（设备独立像素）为375px * 812px，DPR是3，可以计算出设备像素（物理像素）是1125px * 2436px
屏幕分辨率
屏幕分辨率就是设备像素，一般以纵向像素 * 横向像素来表示分辨率。比如iphoneX的设备像素是1125px * 2436px，分辨率也就是1125px * 2436px
在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素（某一方向上相当于1个css像素对应2个物理像素。）。
比如：
在普通屏中 我设置一个div的样式 width：100px ( 100px=100个物理像素。) ，当我将这个样式放在了Retina的屏幕（dpr=2）上的时候，发现变的更加清晰了。这是我们由于两个屏幕的像素密度不一样的结果，后者的像素密度是前者的两倍，所以在100px的css像素中的距离里面就存在了200个物理像素。但是两个展现的效果是一样的（CSS像素所呈现的物理尺寸是一致的。）,只是里面的像素点的数量不同。
同时：visualviewport还是显示100px 但是对于layoutviewport来说就相当于200px。 因为layoutviewport表示的是物理像素。
但是对于图片来说：
在普通屏幕下，1个位图像素对应着1个物理像素，图片可以完美的显示。可是在retina屏幕下，1个位图像素对应着4个物理像素，由于位图像素不可以再分割，所以图片就会只能就进取色，导致图片模糊。
如何来处理这个问题呢。比如一个200 x 300的图片，如果想在retina屏幕上清晰显示的话，就要提供一个400 x 600的2倍图片（@2x），这样的话，1个位图像素就会对应上retina屏上的1个物理像素。图片就不会模糊啦。
说明：retina屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}
initial-scale这个缩放初始值是相对于设备的idea viewport的值进行缩放的，也就是说
<meta name="viewport" content="initial-scale=1">
//等效于
<meta name="viewport" content="width=devive-width"
//两者各有一个bug，所以生产时最好将两个一起写上
但如果同时出现width和initial-scale
<meta name="viewport" content="width=500, initial-scale=1">
并不是根据先后顺序比较，而是通过谁大取谁，比如设备是iphone5，idea viewport是320px，则此时initial-scale=1(320px)，所以此时viewport取width=500
关于initial-scale缩放的默认值以及其理论
visual viewport宽度 = idea viewport宽度 / 当前设置的缩放值
当前缩放值 = idea viewport宽度 / visual viewport宽度
注：这个理论不适合安卓原生浏览器
参考文章：
再聊移动端页面的适配： https://www.w3cplus.com/css/vw-for-layout.html 阅读码：475709
使用Flexible实现手淘H5页面的终端适配： https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.htm l 阅读码：487741
viewports剖析 https://www.w3cplus.com/css/viewports.html
移动web开发-理解设备像素、CSS像素、DPR - 羊先生
解惑好文：移动端H5页面高清多屏适配方案 - CocoaChina_一站式开发者成长社区
Ⅳ 如何把web前端网页做成自适应
1.首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;
只能指定百分比宽度：width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
Ⅳ web前端开发，移动端页面显示问题，缩放比例问题
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
网络来的，我觉得应该能解决你的问题
Ⅵ 前端界面如何做到缩小到一个最值
首先肯定是需要用代码判断使用终端的类型，其次写两套前端程序互分别调用，或者页面每个部分都写上相应的适配代码，分别适配。后者有个缺点就是代码有些冗杂。你可以在网上搜索一下这两种方式的具体操作方式，需要改动的东西不会太多。
Ⅶ 网页中如何做到缩放后屏幕后内容不受变化
通过观察它的代码，得出， 核心内容是用的 webgl, 然后内容绘制在canvas上面， 之所以ctrl+滑轮缩放，是因为窗口大小并没有改变。 分析是因为它是根据窗口大小做的适配。 并不是其它人提到的媒体查询适配。 可以尝试缩小窗口，你会发现会出现适配。
Ⅷ 我写了一个html网页，添加了<meta name="viewport"content="width=device-width, initial-scale=1"/>后就
手机页面的话html的头部最好先加上<metaname="viewport"content="width=device-width,initial-scale=1.0
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>这种标签，表示是根据手机屏幕1:1显示的页面。
这种情况需要用百分比来编写样式的宽度大小或者用JS判断根据不同的屏幕分辨率来编写不同的样式大小，这样才能确保你的样式能正确的占满全屏。
设定数值的单位最好用em或rem这种相对单位来设定，这样可以适应不同分辨率的字体大小显示，这样设置的缺点是数值设定有些模糊，不够精准，不能百分百保证所有分辨率页面显示效果完全一致；优点是不必麻烦的根据不同分辨率去写不同大小的样式。
Ⅸ pc端 前端页面 js灯箱效果能放大缩小吗
可以监听滚轮事件 mousewheel 判断是点击的图片是否显示，显示的话 先屏蔽滚动事件 然后获取到你显示出来的容器 改变一下img的css的 transform ：scale属性，也可以判断下滚动方向进行放大和缩小 如果没有显示 就不采取任何处理
Ⅹ 前端分辨率适配
现在手机屏大小不一，而且屏幕硬件性能也各不相同，一般的UI设计都是基于特定机型画设计搞件的，常见的是基于iPhone6的分辨率设计2倍图，以iPhone6为例，屏幕物理像素宽度是750，网页宽度为375PX。开发中还要根据不同手机留出设计余量，因为不同分辨率的手机显示时会有拉伸位移。
网上也有一些方案，处理高清屏适配方案，但一般也只把DPR适配到2，彩用所有长度单位放大2位，网页整体缩放50%的的做法，比如ant-mobile就支持这种方式，它可以定义一个less常量“@hd”来定义CSS中使用的基础单位大小，但是这种方式在遇到网页实际宽度大于375的设备时，还是不能1：1的还源UI设计稿。
我个人在项目中采用的是更复杂的实现方式，可以实现适配DPR大于2的手机屏，并接近100%的还源UI设计稿。具体的适配技术各家大同小异，这里不再细说，我只给出我自己的适配方案。
同大多数适配方法一样，通过 rem 设计一个基础的大小单位 ，做为整个页面的基础单位，再根据屏幕物理DPR结合屏宽计算这个单位的大小，
基础单位 = 屏幕DPR * 网页宽度 / 375（设计稿基准为375）
网页缩放值 = 1 / 屏幕DPR
比如我的方案是把rem设为10px 再乘以“基础单位”，这样在设置一个设计稿上14号字的时候，就写 1.4rem就可以了。另外编写页面布局时，也用这个计算出来的相对单位，这样可以做到不管什么样的屏幕，UI设计搞都不会因宽度变化而变形。另外，如果使用ant-mobile这样的支持高清方案的UI中间件，直接在配置中把它的LESS常量 “@hd”设置 为 “0.1rem”就可以了。
另外还有一个小的福利，就是在这个方案下，当你想画出“1物理像素”的细边框时，直接用 “1px”，就可以了，因为在这个方案下，1px对应的是一个物理像素。
下面给出我实践中使用的适配代码：(这是直接放在HTML文件中的版本）
//计算屏幕比例并设置html的font-size
/**
将html字号设置为10个设计像素（一个基准系数，即rem为10 设计稿像素）
设计一个缩放系数，以应对可能出现的适配高清屏要求
*/
( function () {
/**初始化方法
* _standard 设计稿对应的分辨率
* base_DPR 设定最小DPR值
*/
function setInitialRem( _standard, base_DPR) {
//取得当前设备DPR
var dpr = window. devicePixelRatio || 1;
//如果设定了默认最小DPR值
if ( base_DPR) {
dpr = dpr >= base_DPR ? dpr : base_DPR;
}
//设定缩放视图比例
var scale = 1 / dpr;
//设直视图缩放比例
document. head. querySelector( 'meta[name="viewport"]'). content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no, shrink-to-fit=no";
//取得当前设备宽度
var device_width = document. documentElement. clientWidth; //window.innerWidth;
//标定原稿设计基准值 当前稿件设计宽度为 iPhone6/6s 375像素
var standard_width = _standard * dpr;
//设定基准单位
var base_value = 10;
//基准系数=设备宽度➗稿件基准宽度✖️设备DPR✖️10
var rem = device_width / standard_width * dpr * base_value;
//设置 REM
document. documentElement. style. fontSize = rem + "px";
}
window. addEventListener( "resize", function () { setInitialRem( 375, 1); });
setInitialRem( 375, 1);
})();