个人笔记

最新推荐文章于 2024-05-20 22:14:20 发布

N____N

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量307

点赞数 1

分类专栏：笔记，手机尺寸文章标签：前端手机移动

本文链接：https://blog.csdn.net/N____N/article/details/54929086

版权

笔记，手机尺寸专栏收录该内容

4 篇文章 0 订阅

订阅专栏

overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。

在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

*文字溢出显示省略号

{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

*旋转

综合使用使用transform对元素进行旋转、缩放、倾斜、移动的方法来对一个元素进行多重变形。
用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate

*阴影（浏览器兼容）

-webkit-box-shadow: 3px 3px 5px #eb6100;左右上下大小颜色
-moz-box-shadow: 3px 3px 5px #eb6100;
box-shadow: 10px 10px 10px #eb6100;

*em与px

html{font-size:100%}

em

1. font-size:18px=18/16=1.125em line-height:30px=30/18=1.67em width:320px=1/18*320=17.78em height:50px=1/18*50=2.78em

2. font-size:16px=16/16=1em line-height:30px=30/16= width:320px=1/16*320= height:50px=1/16*50=

@media only screen and (min-width: 320px)and (max-width: 360px) {
body{ font-size:0.75em;line-height:1.85em }
}
rem
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

*PC端banner居中

对于class的banner我们要经过如下定义{ position:relative; left:50%; margin-left:-50%px; width:100%; }margin-left的值就是图片大小的一半，left要定义个50%。
*给head加点击链接进入新的窗口

消除input框的默认样式
input, button, select, textarea {outline: none;-webkit-appearance:none;border-radius: 0;}

input[type="submit"], input[type="button"],input[type="reset"],button { -webkit-appearance: none; outline: 0; cursor: pointer; }

注：submit button reset是input的类型标签

outline: none;去掉chrome浏览器自带的点击input框出现边框情况
-webkit-appearance: button;使元素标签看起来像个按钮样式，意思定义了按钮样式
-webkit-appearance: none;去掉按钮样式
border-radius: 0;去掉圆角in

*input框默认显示的字体颜色和输入的颜色保持一致

*我想让input框默认显示的字体颜色和输入的颜色保持一致，一直认为应该要设置input的颜色，改了很久，一定用不管，最后想到了placeholder属性，于是乎百度了一下，果然placeholder默认的字体颜色是浅灰色的，然后针对placeholder来设置你自己想要的颜色
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000; opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000;opacity:1;
}
input:-ms-input-placeholder{
color: #000;opacity:1;
}
input::-webkit-input-placeholder{
color: #000;opacity:1;
}
也可以给这个属性加字体
input::-webkit-input-placeholder { /* WebKit browsers*/
　　color:#999;font-size:14px;
　　}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/
　　color:#999;font-size:14px;
　　}
input::-moz-placeholder { /* Mozilla Firefox 19+*/
　　color:#999;font-size:14px;
　　}
input:-ms-input-placeholder { /* Internet Explorer 10+*/
　　color:#999;font-size:14px;
}

* 列表第几个间距改（手机站起作用 ie的不支持）

li#ttj_x6
li:nth-child(3)

li.last

：nth-child（3n+2）-------每隔三个从第二个开始

*border边框背景图片

border-radius 2值对角位置13 24
-----------三个值顺时针方向1 （2对角4） 3 四个值顺时1234 也就是上右下左的顺序一个四边形的各个位置
-webkit-border-images:url (Images/nin.png) 27/27px repeat stretch
-----------27是方向 27是宽度平铺拉伸 /边框宽度图片81px /3＝27四个角水平垂直方向九宫格

图片素材

h5图标用法
＜i class ＝"Fa fa-pencil fa-fw"＞ ---------三个参数分别是：类字体类型大小

*手机兼容性调节

@media only screen and (min-width: 320px)and (max-width: 430px) {
.zhuanjia ul li dl a { margin-top: 0; }
}

*单位换算

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em=16px。那么12px=0.75em，10px=0.625em。
为了简化font-size的换算，需要在css中的body选择器中先全局声明 Font-size=62.5%，很多初学者可能会在此定义0.625em或者直接定义12px，这是没有效果的，一定要定义font-size=62.5%。
这就使em值变为 16px*62.5%=10px，这样12px=1.2em，10px=1em，也就是说只需要将原来的px数值除以10，然后换上em作为单位就行了。
所以50px等于5em。

#LRfloater0{ top:40px !important}

距离顶部40像素

*br浮动

br{ float:left}可以限定屏幕在某个区间浮动显示为一行

{position:fixed; left:0; right:0; bottom:0}定位底部居中

N____N

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
个人笔记

*旋转综合使用使用transform对元素进行旋转、缩放、倾斜、移动的方法来对一个元素进行多重变形。用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.
复制链接

扫一扫