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