html6sh@vip.163.com
QQ:3272893092
分享數：5
一般用現在常用的開發框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..當然可能還有一些移動端開發的框架。
移動頁面自適應手機屏幕的方法；
1， 利用meta標簽
Meta標簽主要用來描述一個HTML網頁文檔的屬性，如作者、日期時間、網頁描述、關鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網站的關鍵字，讓網頁利于搜索引擎。
<meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解釋：Viewport指用戶網頁的可視區域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。
以上標簽只支持一種尺寸，正確的做法是用js動態生成下面標簽，前提是要先獲取屏幕尺寸。
<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 content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }
else{document.write(‘<meta content="width=640, target-densitydpi=device-dpi">‘); }
else { document.write(‘<meta content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }
</script>
2， 百分比法
CSS中的百分比中指的是相對于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡單的頁面，復雜的頁面實現很困難。
在頁面載入開始時首先判斷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。大多數瀏覽器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";
4， 媒體查詢
媒體查詢正是為解決網頁適應手機屏幕。媒體查詢的功能就是為不同的“媒體”設置不同的css樣式，頁面尺寸，設備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。
TAG標簽耗時：0.002086877822876 秒
如沒特殊注明，文章均為江浙滬網絡推廣,轉載請注明來自http://www.0898bike.com/html/news/
返回列表
- 下一篇： 學校網站建設需要注意的方面
- 上一篇： 網頁設計使用特殊字體有利于網站優化
志強網絡擁有資深設計師團隊和自主系統開發技術團隊，為客戶專業定制企業品牌網站、響應式網站、商城系統、手機微信網站、外貿網站、營銷型網站、旅游網站、微信小程序、APP等。歡迎廣大客戶咨詢！
