Ⅰ 前端頁面縮放技巧
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);
})();