網(wǎng)頁如何適配手機端（網(wǎng)頁如何適配手機端打開）

用CSS3 @media 查詢 也叫“媒體查詢”；

語法：

.aaa{width:1200px;}    //正常樣式

//下面是分辨率最小為300px，最大分辨率為1024px的樣式

@media screen and (min-width: 300px) and (max-width:1024px) {

.aaa{width:375px;}

}

可以參考：菜鳥教程CSS3 @media 查詢

二、CSS如何讓網(wǎng)站適應手機屏幕？

并不是加了meta標簽，網(wǎng)站就會自適應手機屏幕了，還需要更改一些樣式。

你圖片上顯示搜索框的寬度是568px，但是頁面的寬度只有375（iPhone X的頁面顯示寬度），所以肯定會超出去，發(fā)生顯示不全的情況

這種情況你可以使用media標簽來做自適應

@media only screen and (max-width: 400px){
    .search{width:300px}
}

上面代碼的意思是當頁面寬度小于400px的時候  就讓.search的寬度變成300px。你可以吧上面的代碼加到你的css里面看一下效果

三、html如何適應手機？

有幾種，利用meta標簽、百分比法、使用CSS3單位rem、媒體查詢。

利用meta標簽

Meta標簽主要用來描述一個HTML網(wǎng)頁文檔的屬性，如作者、日期時間、網(wǎng)頁描述、關鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網(wǎng)站的關鍵字，讓網(wǎng)頁利于搜索引擎。

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

解釋：Viewport指用戶網(wǎng)頁的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。

以上標簽只支持一種尺寸，正確的做法是用js動態(tài)生成下面標簽，前提是要先獲取屏幕尺寸。

<script type="text/javascript">

var phoneWidth =  parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.$1);

if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

</script>

百分比法

CSS中的百分比中指的是相對于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡單的頁面，復雜的頁面實現(xiàn)很困難。

使用CSS3單位rem

在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請自行查閱），假設寬度為W，一個div在寬度為640px的設計稿的下的寬度為dW1，如果html的font-size為100px，那么這個div的寬度用rem表示是多少呢？

計算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設置一個合適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數(shù)瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。

所以會在頭部加上這個JS代碼：

<script type="text/javascript">

var html = document.querySelector(‘html‘);

var rem = html.offsetWidth / 6.4;

html.style.fontSize = rem + "px";

媒體查詢

媒體查詢正是為解決網(wǎng)頁適應手機屏幕。媒體查詢的功能就是為不同的“媒體”設置不同的css樣式，頁面尺寸，設備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。

四、php 網(wǎng)頁如何適應手機屏幕高度

$(window).bind('resize load', function(){
$("body").css("zoom", $(window).width() / 640);
$("body").css("display" , "block");
});

希望回答對你有幫助，如果有疑問，請繼續(xù)追問

以上就是關于網(wǎng)頁如何適配手機端相關問題的回答。希望能幫到你，如有更多相關問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內容。

推薦閱讀：

抖店平臺登錄入口網(wǎng)頁版（抖店登錄官網(wǎng)）

網(wǎng)頁設計首薦蘇州聚尚網(wǎng)絡

電腦網(wǎng)頁滾動條下拉不了怎么辦（電腦網(wǎng)頁滾動條下拉不了怎么辦呀）

鄭州待遇最好的設計院

dnf傳說套排行榜（dnf傳說套哪個最好）