wap手机版css兼容笔记

红太狼 2022-09-25 06:22 6阅读 0赞

1、页面头部声明如下，此声明初始化页面不可移动，不可缩放，可以自动重力感应。

<!DOCTYPE html>

<html>

<head>

<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2、页面最外层div可以用最大宽度来实现：

.main\{ background:\#fff; margin:0 auto;position:relative; max-width:640px;\}

尽量不要使用@media only screen and (min-device-width : 320px) and(orientation:portrait) \{\}和@media only screen and (min-device-width : 640px) and(orientation:landscape) \{\}\}来实现横屏纵屏，这样会导致安卓2.3以下版本在输入状态下整个网页放大。

可以使用@media screen and (min-width:480px) \{\} @media screen and(min-width:640px) \{\}来规定当屏幕大于多大尺寸的时候应用什么样式。

3、手机版wap一般通用字体font:1em'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;这种写法会适应多种屏幕的尺寸，字体会随着屏幕缩放。

4、页面背景美观又不会影响访问速度可以使用css3背景渐变：

body \{

height:100%;

background-image:-webkit-gradient(linear, 0 0, 0 100%,from(\#4E94C4), to(\#EFF8FF));

background-image:linear-gradient(\#4E94C4,\#EFF8FF);

background-image:-moz-linear-gradient(\#4E94C4,\#EFF8FF);

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,EndColorStr='\#EFF8FF', StartColorStr='\#4E94C4')

5、a链接去掉下环线以及数遍点击效果，input，select去掉默认点击边框光标，a,button,input,select\{ outline:none;\}

6、图片缩放宽度不要固定img \{ max-width: 100%; -ms-interpolation-mode: bicubic; \}，可以给img宽度加上百分比。

7、导航部分机构：（此机构可以实现缩放文字居中两边靠左）

<b>我的爱易拍</b>

<iclass="a\_r"><a href="login.html"><imgsrc="images/sc.png"/></a></i>

<divclass="clear"></div>

</div>

样式如下：

.iepai\_header \{ width:100%; height:45px;line-height:45px; text-align:center; position:relative; \}

.a\_l\{ position:absolute; left:10px; top:3px;\}

.a\_r\{ position:absolute; right:10px; top:3px;\}

8、左右结构的输入框自适应100%，代码机构如下：

</div>

</div>

样式如下：

.inputArea \{

background:\#fff;

border:1pxsolid \#628aa5;

-webkit-border-radius:5px;

border-radius:5px;

-webkit-box-shadow:01px 5px \#acaeaf inset,0px 1px 1px rgba(255,255,255,0.5);

box-shadow:01px 5px \#acaeaf inset,0px 1px 1px rgba(255,255,255,0.5)

.inputLine \{

color:\#000;

padding:7px10px;

clear:both

.inputLine:first-of-type \{

border-bottom:1pxsolid \#cfcfcf

.il \{

float:left;

padding:5px0

.ir \{

overflow:hidden;

text-align:left;

padding:0

.ir input \{

-webkit-appearance:none;

width:98%;

font-size:14px;

vertical-align:middle;

border:solid1px \#ccc;

padding:5px0

9、左右结构的文字换行考右对齐代码结构如下：

<li>

<i class="title\_content1">振华西路设计之都振华西路设计之都振华西路设计之都振华西路设计之都振华西路设计之都</i>

<divclass="clear"></div>

</li>

样式如下：

. title\_tit1\{float:left;\}

.title\_content1 \{ display:block;overflow:hidden;\}

10、弹出层半透明居中：

<div class="error\_txt">用户名输入错误，请重新输入！</div>

</div>

样式如下：

.error\{position: absolute; left: 0; top: 0;right: 0; bottom: 0;   margin: auto;width:300px; height:80px; z-index:999;\}

.error\_bg\{

width:300px; height:80px;

filter:alpha(opacity=60); /\* IE \*/

\-moz-opacity:0.6;              /\* Moz + FF \*/

opacity: 0.6;

background:\#000;

position:relative; \}

.error\_txt\{ color:\#fff; width:300px;height:80px; text-align:center; line-height:80px; position:absolute; left: 0;top:0;\}

wap手机版css兼容笔记

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS学习笔记（浏览器兼容问题）

相关 phpyun 电脑调试wap版

相关手机wap和html有什么区别,手机网页wap用Bootstrap还是jQuery Mobile

相关 wap手机版css兼容笔记

相关手机网站开发(WAP网站)第一篇

相关 WAP版的手机号码所在地查询

相关 CSS 兼容手机浏览器点击蓝色边框

相关 css兼容

相关手机兼容bug汇总

相关 [导入]WAP 手机及开发技术调研