3.3号随笔

Posted 2020-06-18 miaomiao8899

第一次接触html5页面，一直不太清楚关于设备的全铺是怎么样写的，在许多模板中发现了

1、

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 注意：配合使用保证页面100%，需要设置html，body 宽度高度100%，多余部分进行隐藏，可以设置最大宽度。max-width,margin:0 auto，保证移动端页面被拉宽时，

可以保证页面始终居中显示

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。

通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

2、在移动端中可以使用Iscroll.js来实现局部元素的滚动，布局方式一般为

<div id="wrapper">

<ul class="scroller">

<li>...</li>

</ul>

</div>

 

只有wrapper里的第一个子元素才可以滚动，如果你想要更多的元素可以滚动，那么你可以试试下面的这种写法：

<div id="wrapper">
        <div id="scroller">
               <ul>
                    <li></li>
                     ...
                </ul>
                <ul>
                     <li></li>
                     ...
                </ul>
       </div>
</div>

设置wrapper的宽度、高度，设置多与内容与隐藏，那么可以实现ul元素的滚动，注意设置scroll的高度时需要计算好li的高度和数量，
避免出现滚动不能到底部的现象，在出现滚动不能对准位置的时候，可以使用snap：li来调整好滚动好的位置

3、模块高度可以设为百分比，具体元素的高度需写死。<font style="font-size:1em">缺点：不同手机中显示有细微差别;空隙用百分比，具体元素写死.
4、在移动端布局，尤其是列表ul li这样的，不能讲宽度固定死，这样就不能兼容各式各样的手机，可以使用flex弹性盒子，
https://segmentfault.com/a/1190000000707526
父类需要设置display：box或者flex（新版本） -webkit-box-flex:1 ;   -moz-box-flex: 1;设置均分，如果四个li，在li上面设置-webkit-box-flex:1 ;，那么每个li占1份，那么li的宽度就是1/4，实现均等排列
5、在css3中的动画方法，animation  是需要@keyframe来执行的，规定什么样的动画，同时需要做好兼容性