移动端的写法

合集 - css(70)

1.转义字符2023-07-222.alt和title的区别2023-07-223.相当路径不能跨盘 2023-07-224.表格2023-07-225.标签2023-07-226.列表类型2023-07-227.输入框2023-07-228.样式表的创建2023-07-229.常见的选择器2023-07-2210.权重2023-07-2211.常见的css属性2023-07-2212.盒模型2023-07-2213.列表 文本属性2023-07-2214.字体属性2023-07-2215.浮动高度塌陷问题 2023-07-2216.文本省略号2023-07-2217.背景属性2023-07-2218.常见bug2023-07-2219.浮动的问题2023-07-2220.元素类型2023-07-2221.元素之间的相互转换2023-07-2222.子代选择器 结构伪类选择器2023-07-2223.重绘和回流的概念2023-07-2224.透明色2023-07-2225.定位 position2023-07-2226.隐藏元素的方法2023-07-2227.定位2023-07-2228.定位居中2023-07-2229.绝对定位2023-07-2230.定位 介绍2023-07-2231.定位 总结2023-07-2232.点位小结2023-07-2233.锚点点击2023-07-2234.精灵图2023-07-2235.矢量图2023-07-2236.清除浮动2023-07-2237.伪元素操作符2023-07-2238.居中2023-07-2239.表单样式问题2023-07-2240.标签 介绍2023-07-2241.同级选择器2023-07-2242.单选效果2023-07-2243.折叠菜单和选项卡2023-07-2244.bfc2023-07-2245.自适应两栏布局2023-07-2246.三栏布局2023-07-2247.表格 的2023-07-2248.浏览器2023-07-2249.css32023-07-2250.怪异盒模型2023-07-2251.其他css3属性 圆角 三角形2023-07-2252.最大最小宽高的问题2023-07-2253.定位居中的问题 位移2023-07-2254.h5的语义化标签2023-07-2255.选择器2023-07-2256.属性选择器2023-07-2257.弹性布局2023-07-2258.弹性子元素的特点2023-07-2259.多背景图的叠加2023-07-2260.响应式布局2023-07-2261.移动端基础介绍2023-07-29

62.移动端的写法2023-07-29

63.图标备注2023-07-2964.vw和%2023-07-2965.弹性布局的属性2023-07-2966.弹性子属性2023-07-2967.css新属性扩展2023-07-2968.多列布局2023-07-2969.未知宽高居中2023-07-2970.逐帧动画2023-07-29

收起

 

 

        pc 端 标准设计图 1920*xxxx会有版心

 

        移动端

            1  设计图 比实际的手机大2背或者三倍

 

        pc 端 标准设计图 1920*xxxx会有版心

 

        移动端

            1  设计图 比实际的手机大2背或者三倍

             2 手机的屏幕 视网膜屏幕

 

             3 iphone6 为例 物理像素750 逻辑像素375

             设备像素比 （）dor 物理橡树 /逻辑像素

 

 

             一般情况下 现在主流移动端大合集设计图 750*xxx

 

 

 

 

             移动端的实现  

    html {

        font-size: calc(100vw/750);

 

    }

 

    p {

        font-size: 32rem;

        width: 100rem;

        height: 100rem;

        background-color: aquamarine;

    }

        /* 屏幕宽度正好是750的时候 字体大小是1px */

        font-size: calc(100vw/750);

        /* 屏幕宽度正好是750的时候 字体大小是100px */

        font-size: calc(100vw/7.5);

 

    }