日常小知识(移动端)

1：修改默认的placeholder颜色

::-webkit-input-placeholder { /* WebKit browsers */

    color: #a7a7a7;

}



:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

    color: #a7a7a7;

}



:-moz-placeholder { /* Mozilla Firefox 19+ */

    color: #a7a7a7;

}



:-ms-input-placeholder { /* Internet Explorer 10+ */

    color: #a7a7a7;

}

2：复写掉ios的input样式(移动)

input[type=button],

input[type=submit] {

  -webkit-appearance: none;

  outline: none;

} 

3：ios，overflow，滑动加惯性

-webkit-overflow-scrolling: touch;

4:复写checkbox和radio样式(一,适用于谷歌浏览器，或者移动端)

原理：去掉默认样式，根据:checked改变背景图

效果图：

<ul class="radioCon">

    <li>

        <label>

            <input type="radio" name="a">

            这里是第一个选项

        </label>

    </li>

    <li>

        <label>

            <input type="radio" name="a">

            这里是第二个选项

        </label>

    </li>

</ul>



input[type=radio]{

        -webkit-appearance: none;/*去掉系统自带的样式*/

        appearance: none;

        width: 17px;

        height: 17px;

        background-image: url(default.png);/*默认显示*/

        background-repeat: no-repeat;

}

input[type=radio]:checked{

    background-image: url(checked.png);/*选中显示*/

}

View Code

5：复写radio和checkbox的样式(二，适用于支持css：checked选择器的浏览器)

原理：隐藏元素，根据checked改变label的样式

效果图：

<ul class="radowConB">

    <li>

        <input type="radio" name="b" id="radioA">

        <label for="radioA">这里是选项1</label>

    </li>

    <li>

        <input type="radio" name="b" id="radioB">

        <label for="radioB">这里是选项1</label>

    </li>

</ul>



input[type=radio]{

    display: none;

}

label{

    width: 100%;

    height: 100%;

    display: block;

}

input[type=radio]:checked + label{

    background-color: #424541;

}

View Code

 

6：关于手机横屏竖屏

css3媒体查询写法

@media (orientation: landscape) { } 横屏

@media (orientation: portrait) { }竖屏

 js写法

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {

        if (window.orientation === 180 || window.orientation === 0) { 

            alert('竖屏状态！');

        } 

        if (window.orientation === 90 || window.orientation === -90 ){ 

            alert('横屏状态！');

        }  


}, false);

 

7，移动页面适配方式之640适配，适用于有特效展示页面。核心是写viewport信息...o(╯□╰)o，写法↓

 1 <script type="text/javascript">

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

 3         var phoneScale = phoneWidth / 640;

 4         var ua = navigator.userAgent;

 5         if (/Android (\d+\.\d+)/.test(ua)) {

 6             var version = parseFloat(RegExp.$1);

 7             if (version > 2.3) {

 8                 document.write('<meta name="viewport" content="width=640, initial-scale= ' + phoneScale + ' ,minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">')

 9             } else {

10                 document.write('<meta name="viewport" content="width=640, initial-scale= ' + phoneScale + ' , target-densitydpi=device-dpi">')

11             }

12         } else {

13             document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">')

14         }

15     </script>

640适配

 8，单行文本，超出容器显示...(多用于标题)

1 overflow:hidden;//溢出隐藏

2 text-overflow:ellipsis;//超出宽度显示...

3 white-space:nowrap;//禁止换行

 

9，css文字两端对齐

<p>设计师<span></span></p>

<p>限量销售<span></span></p>

<p>限量销售设计<span></span></p>

css样式

p{

  width: 100%;

  text-align: justify;  

}

p > span{

  display: inline-block;

   padding-left: 100%;  

}

 

 

 

 

 

 

 

待发现，待解决，待更新……