當前位置：
首頁 >
移动端与PC端页面布局区别
發布時間：2025/3/15
24
豆豆
生活随笔
收集整理的這篇文章主要介紹了
移动端与PC端页面布局区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
視口
視口是移動設備上用來顯示網頁的區域，一般會比移動設備可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的后果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，可以用 meta 標簽，name=“viewport ” 來設置視口的大小，將視口的大小設置為和移動設備可視區一樣的大小。
設置方法如下( 快捷方式：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端與移動端渲染網頁過程：
視網膜屏幕（retina屏幕）清晰度解決方案
視網膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解為屏幕上的一個發光點，無數發光的點組成的屏幕，視網膜屏幕比一般屏幕的物理像素點更小，常見有2倍的視網膜屏幕和3倍的視網膜屏幕，2倍的視網膜屏幕，它的物理像素點大小是一般屏幕的1/4,3倍的視網膜屏幕，它的物理像素點大小是一般屏幕的1/9。
圖像在視網膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由于視網膜屏幕的物理像素點比一般的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，為了解決這個問題，可以使用比原來大一倍的圖像，然后用css樣式強制把圖像的尺寸設為原來圖像尺寸的大小，就可以解決模糊的問題。
清晰度解決過程示意圖：
背景圖強制改變大小，可以使用background新屬性
background新屬性?
background-size:
- length：用長度值指定背景圖像大小。不允許負值。
- percentage：用百分比指定背景圖像大小。不允許負值。
- auto：背景圖像的真實大小。
- cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
- contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
轉載于:https://www.cnblogs.com/jyue/p/10504023.html
總結
以上是生活随笔為你收集整理的移动端与PC端页面布局区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sharing-jdbc实现读写分离及分
- 下一篇： win10家庭版删除文件提示没有权限最简