设置viewpoint和屏幕等宽
Code:
- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
复制代码
主流分辨率
Android:主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种。
(非主流机型还包括:240x320, 320x480, 640x960 这三种,其中两种都与 iPhone 一致。)
iOS: 主流机型主要为 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 这五种。
WP:主流机型主要为 480x800,720x1280, 768x1280 这三种
新增:iPhone6:750*1334 iPHone6s 1242*2208
使用相对单位
1、宽、高、填充、边界均使用百分比
2、字体em/rem
em:相对父级
rem(root element):相对根父级
ps:字体单位一览表(各大浏览器默认字体16px)
Pixels
|
EMs
|
Percent
|
Points
|
6px
|
0.375em
|
37.5%
|
5pt
|
7px
|
0.438em
|
43.8%
|
5pt
|
8px
|
0.5em
|
50%
|
6pt
|
9px
|
0.563em
|
56.3%
|
7pt
|
10px
|
0.625em
|
62.5%
|
8pt
|
11px
|
0.688em
|
68.8%
|
8pt
|
12px
|
0.75
|
75%
|
9pt
|
13px
|
0.813
|
81.3%
|
10pt
|
14px
|
0.875
|
87.5%
|
11pt
|
15px
|
0.938
|
93.8%
|
11pt
|
16px
|
1em
|
100%
|
12pt
|
17px
|
1.063em
|
106.3%
|
13pt
|
18px
|
1.125em
|
112.5%
|
14pt
|
19px
|
1.188em
|
118.8%
|
14pt
|
20px
|
1.25em
|
125%
|
15pt
|
21px
|
1.313em
|
131.3%
|
16pt
|
22px
|
1.375em
|
137.5%
|
17pt
|
23px
|
1.438em
|
143.8%
|
17pt
|
24px
|
1.5em
|
150%
|
18pt
|
合理使用box-flex,让布局更简单
兼容性写法:
- .flex-box{
- overflow: hidden;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- width: 100%; height: 300px;
- margin: 0 auto;
- color: #fff;
- text-align: center;
- font-family: 'Microsoft YaHei';
- }
- .flex1{
- width: 20%; height: 100%;
- background: #ff8989;
- display: block;
- }
- .flex2{
- -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
- -moz-box-flex: 1; /* OLD - Firefox 19- */
- -webkit-flex: 1; /* Chrome */
- -ms-flex: 1; /* IE 10 */
- flex: 1;
- background: #1bbc9b;
- }
- .flex3{
- width: auto;
- width: 20%; height: 100%;
- background: #516d81;
- }
-
复制代码
使用box-sizing,可以减少很多不必要的计算
兼容性写法:
- .sizing{
- -moz-box-sizing: border-box;
- -o-box-sizing: border-box;
- box-sizing: border-box;
- }
复制代码
使用 CSS 媒体查询
- @media screen and (min-width: 640px){
- 样式
- }
复制代码
其他实用小技巧:
去掉手持设备点击时出现的透明层:
- a,button,input{
- -webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-tap-highlight-color: transparent;
- }
复制代码
去掉input在ios下的默认效果:
- input{
- resize: none;
- -webkit-appearance:none;
- }
复制代码
阻止旋转屏幕时自动调整字体大小
- html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
- -webkit-text-size-adjust:100%;
- }
复制代码
分享到:
相关推荐
手机页面开发
HTML5手机专题页面触屏滑动上下翻页特效
‘10【导航看上去不错】越野e族中国越野触屏版手机wap汽车网站模板下载 13【很适合新手】仿亞普達手机wap旅游网站模板下载 (2) 15【很适合新手学习】仿coffee手机wap企业网站模板下载 18【很适合新手学习】仿住 - 亞...
基于stm32迷你版开发的 lcd触摸屏页面显示程序 自用成功 下载注意stm3型号不同造成的错误
MUI手机app前端页面开发框架模板下载 MUI手机app前端页面开发框架模板下载
vuejs前端页面开发总结共7页.pdf.zip
婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面开发婚礼页面...
维控触摸屏 多页面切换,LEVI编辑画面,我觉得可能对大家有帮助
手机页面模版html5源码-仿昆山看房网手机触屏版手机wap房产网站模板.zip
bootstrap 响应式 手机网站 手机页面 前端开发 模板 适合做手机页面参照
仿淘宝手机触屏版商城静态HTML5页面
jquery手机触屏版HTML5页面左侧弹出导航菜单代码
touchslider手机TAB触屏切换页面插件 touchslider手机TAB触屏切换页面插件
手机页面模版html5源码-【很有创意网站】礼物搜手机触屏版手机wap购物网站模板下载.zip
BS页面前端开发建议BS页面前端开发建议
手机考试页面 blog介绍:https://blog.csdn.net/huyunfei/article/details/107761263 vue实现手机在线考试h5页面,静态,扩展使用
最全的sharepoint 页面开发指南