移动端与PC端页面布局区别
視口
視口是移動設(shè)備上用來顯示網(wǎng)頁的區(qū)域，一般會比移動設(shè)備可視區(qū)域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設(shè)計的網(wǎng)頁，這樣帶來的后果是移動端會出現(xiàn)橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網(wǎng)頁不容易觀看，可以用 meta 標(biāo)簽，name=“viewport ” 來設(shè)置視口的大小，將視口的大小設(shè)置為和移動設(shè)備可視區(qū)一樣的大小。
設(shè)置方法如下( 快捷方式：meta:vp + tab )：
<head> ...... <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ...... </head>pc端與移動端渲染網(wǎng)頁過程：
視網(wǎng)膜屏幕（retina屏幕）清晰度解決方案
視網(wǎng)膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解為屏幕上的一個發(fā)光點(diǎn)，無數(shù)發(fā)光的點(diǎn)組成的屏幕，視網(wǎng)膜屏幕比一般屏幕的物理像素點(diǎn)更小，常見有2倍的視網(wǎng)膜屏幕和3倍的視網(wǎng)膜屏幕，2倍的視網(wǎng)膜屏幕，它的物理像素點(diǎn)大小是一般屏幕的1/4,3倍的視網(wǎng)膜屏幕，它的物理像素點(diǎn)大小是一般屏幕的1/9。
圖像在視網(wǎng)膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由于視網(wǎng)膜屏幕的物理像素點(diǎn)比一般的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，為了解決這個問題，可以使用比原來大一倍的圖像，然后用css樣式強(qiáng)制把圖像的尺寸設(shè)為原來圖像尺寸的大小，就可以解決模糊的問題。
清晰度解決過程示意圖：
背景圖強(qiáng)制改變大小，可以使用background新屬性
background新屬性?
background-size:
- length：用長度值指定背景圖像大小。不允許負(fù)值。
- percentage：用百分比指定背景圖像大小。不允許負(fù)值。
- auto：背景圖像的真實(shí)大小。
- cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
- contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內(nèi)。
轉(zhuǎn)載于:https://www.cnblogs.com/jyue/p/10504023.html
總結(jié)
以上是生活随笔為你收集整理的移动端与PC端页面布局区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sharing-jdbc实现读写分离及分
- 下一篇： win10家庭版删除文件提示没有权限最简