自適應網頁
摸索之後
網頁開頭要加
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
這個 VS2017 MVC 新增時已幫你弄好 只要加個 initial-scale=1.0
重點來了 因為我的 Layout 是放在 <div> 內 不是放 <body>
所以Css 要這樣寫
html,body {
margin:0px; //加這行 才不會超出 瀏覽器 範圍
height: 100%;
width: 100%;
background-color:black;
font: normal 100% Helvetica, Arial, sans-serif; /*字体大小是页面默认大小的100%，即16像素*/
}
要加 html, bosy 才會有高度
<body>
<div id="Mas_win" class="easyui-layout" data-options="width: '100%',height: '100%'">
<div id="BHead" data-options="region:'north',border:true,title:'',height:'10%'">
</div>
<div id="Bcenter" data-options="region:'center',title:'',border:true,height:'45%'">
</div>
<div id="Bsouth" data-options="region:'south',title:'',border:true,height:'45%'">
</div>
</div>
</body>
這樣才會改變 瀏覽器 大小 layout 才會跟著變
裏頭本來是用 <div> 擺字 進去 但是一直在 高度變化下 無法適應高度置中
找不到方法 最快的就是 用 <table> 包起來 一格格放 就會居中了
接下來就是 字型了
看了一堆 說啥麼 em vw vh
參考 http://www.cnblogs.com/hustskyking/p/change-fontSize-with-pure-css.html
講得比較清楚也有範例
最後我先採用 font-size: 2vw; 搞定
結局:還是 <table> 好用 + easyui-layout +font-size: 2vw;
不要設 多少 px 全部改用 % 處理就好
http://blog.csdn.net/kabuqinuo229891/article/details/38425345
easyui 布局有个属性fit,只要添加了fit='ture',布局就会自适应
***************************************************************
layout 內放 Table 但是 縮小還是有極限 一但 太小 就會出現滾動條
如果不想出現 css 加上 overflow:hidden; 就不會出現
**********************************************
網頁開頭要加
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
這個 VS2017 MVC 新增時已幫你弄好 只要加個 initial-scale=1.0
重點來了 因為我的 Layout 是放在 <div> 內 不是放 <body>
所以Css 要這樣寫
html,body {
margin:0px; //加這行 才不會超出 瀏覽器 範圍
height: 100%;
width: 100%;
background-color:black;
font: normal 100% Helvetica, Arial, sans-serif; /*字体大小是页面默认大小的100%，即16像素*/
}
要加 html, bosy 才會有高度
<body>
<div id="Mas_win" class="easyui-layout" data-options="width: '100%',height: '100%'">
<div id="BHead" data-options="region:'north',border:true,title:'',height:'10%'">
</div>
<div id="Bcenter" data-options="region:'center',title:'',border:true,height:'45%'">
</div>
<div id="Bsouth" data-options="region:'south',title:'',border:true,height:'45%'">
</div>
</div>
</body>
這樣才會改變 瀏覽器 大小 layout 才會跟著變
裏頭本來是用 <div> 擺字 進去 但是一直在 高度變化下 無法適應高度置中
找不到方法 最快的就是 用 <table> 包起來 一格格放 就會居中了
接下來就是 字型了
看了一堆 說啥麼 em vw vh
參考 http://www.cnblogs.com/hustskyking/p/change-fontSize-with-pure-css.html
講得比較清楚也有範例
最後我先採用 font-size: 2vw; 搞定
結局:還是 <table> 好用 + easyui-layout +font-size: 2vw;
不要設 多少 px 全部改用 % 處理就好
http://blog.csdn.net/kabuqinuo229891/article/details/38425345
easyui 布局有个属性fit,只要添加了fit='ture',布局就会自适应
解决Jquery easyui 中嵌套时layout不能随浏览器自适应大小
***************************************************************
layout 內放 Table 但是 縮小還是有極限 一但 太小 就會出現滾動條
如果不想出現 css 加上 overflow:hidden; 就不會出現
**********************************************
留言
張貼留言