![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
移动Web
YoungShiHao
这个作者很懒,什么都没留下…
展开
-
移动端1px解决方案收集
参考 移动web 1像素边框 瞧瞧大公司是怎么做的 面试官:你了解过移动端适配吗? 1px边框解决方案总结 https://github.com/dengwb1991/owl-ui/blob/master/src/styles/common/border.less ...原创 2020-04-16 18:45:01 · 138 阅读 · 0 评论 -
移动Web-01-移动端布局特点介绍
1.移动端网页与PC端网页区别 (1)多机型适配 pc端布局无需考虑机型适配, 移动设备(手机,平板)机型尺寸种类特别多,需要考虑不同的机型尺寸适配 (2)页面结构简单 相比而言,由于移动设备的屏幕远小于PC端的屏幕,所以移动Web的页面结构比PC端简单 手机性能有限,所以网页一般不会做的太复杂 常见的移动Web页面结构(从上往下):广告栏banner、搜索栏、轮播图、导航栏...原创 2019-07-18 15:46:07 · 684 阅读 · 0 评论 -
移动Web-02-视口设置和像素
01-移动端适配 通过meta标签来设计网页视口 viewport:视口 ,手机网页的大小 content:视口的内容 width=device-width; 网页的宽度和设备的宽度一致 initial-scale=1.0; 默认尺寸缩放比例为1 user-scalable=no; 禁止用户缩放 移动端必须写,否则响应式布局会有影响 vw和vh单位 vw : 视口...原创 2019-07-18 16:05:47 · 193 阅读 · 0 评论 -
移动Web-03-流式布局
移动端布局核心 1.水平方向不能出现滚动条(禁止缩放,元素宽度超过视口的宽度) 2.需要适配宽度,高度使用固定值(高度允许出现滚动条) 百分比布局(流式布局):宽度使用百分比,高度使用px 3.移动端盒子模型使用内减模型: box-sizing: border-box; 避免由于border和padding导致的水平滚动条的问题 拓展: 手机端的a标签会有背景颜色 解决方法:给a标签添加如下代码 ...原创 2019-07-18 16:14:01 · 188 阅读 · 0 评论 -
移动Web-04-伸缩布局
引用网址 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可...转载 2019-07-18 19:20:18 · 139 阅读 · 0 评论 -
移动Web-05-rem布局
01-使用场景 需要同时适配宽度和高度,以及文字大小, 02-rem与em的区别 1.相同点 都是相对单位 2.不同点 相对的参照物不同 em:相对的是元素自身的字体大小 rem:相对于的根元素(html)的字体大小,1rem = html元素字体大小 03-rem布局注意点 1.一般使用r...原创 2019-07-18 20:37:09 · 186 阅读 · 0 评论