资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/移动端网站开发前端学习总结

移动端网站开发前端学习总结

番茄西红柿 / 1604人阅读

摘要：关于适配宋体移动端适配可以使用宋体宋体也可配合百分比宽度一起使用宋体宋体十分适用于适配默认为以为单位。

1.关于适配:

移动端适配可以使用lib-flexible（也可配合百分比宽度一起使用）十分适用于webapp适配

Font-size默认为12px 以rem为单位。

关于lib-flexible详解：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

 

注意：应用lib-flexible与响应式布局(媒介查询应用不同的样式)难以兼容，因为lib-flexible会改变媒体查询关键的width属性 使其不准确 参考

lib-flexible的问题研究：https://www.cnblogs.com/lyzg/p/5117324.html

 

.container设置max-width: 640px；width: 100%;。应用lib-flexible时也可设置为固定宽度width:10rem;overflow: hidden;（二者都是将屏幕的width等分出来的单位，显示效果一般无二）

 

2.webapp的1px边框过粗问题（还没发现简单可靠的方案）

现在大部分手机的分辨率很高，一个css像素1px，可能相当于2个甚至3个物理分辨率像素

导致1px会比实际的粗（虽然使用lib-flexible，但在在安卓设备下，此问题依然存在）

解决方法(利用transform达到零点几px的效果)：

https://www.cnblogs.com/lunarorbitx/p/5287309.html

 

2.input 有placeholder情况下不要设置行高，否则会偏上

placeholder属性会使文本位置偏上时解决办法：line-height: （和input框的高度一样高）---pc端解决方法 line-height：normal ---移动端解决方法

 

3.为了更好的兼容，会使用完整的viewport设置（）

 

viewport也可作为宽度单位，一些参数设定，width viewport 宽度(数值/device-width)，height viewport 高度(数值/device-height)，initial-scale 初始缩放比例，user-scalable 是否允许用户缩放(yes/no)。

 

关于meta：http://www.cnblogs.com/libin-1/p/5979300.html

 

  1. Display:flex;可以达到很好的布局效果，自适应效果不错 注意：定义了flex、align-items等 后 子元素magain 和 float属性受影响甚至失效

 Flex弹性布局详解：https://www.cnblogs.com/nuannuan7362/p/5823381.html

 

5.有表单元素的地方一般需要外面加上form元素做父容器，并加上submit

 

6.在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder

 

7.当border对布局产生影响时（border会导致容器所占面积变大），可用属性box-sizing:border-box解决（border在元素内部了，不会在外面占空间）

 

8.webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

清除input默认样式

.Input{border-color:transparent;outline:none;;border-width 0;:padding:0 0；}

 

9.媒体查询：给不同屏幕大小的手机设置特殊样式

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

 

  1. 可用于图片适配查询devicePixelRatio＝2，采用2x的背景图（background-size:contain）

高清屏及适配不同设备的方案总结：https://www.cnblogs.com/sese/p/5977486.html

 

11.用aftet伪类和定位可以对盒子达到特殊的修饰效果

为盒子底部加上一条宽度为96%的边框

.div:after{

    position: absolute;

    bottom: 0;

    left: 4%;

    content: ;

    display: block;

    height: 1px;

    width: 96%;

    

}

 

12.input::-webkit-input-placeholder{ color: #******;}//改变提示字体的颜色，不会改变用户输入字的颜色（pc端页面还要写兼容性）

 

13.font-family: Microsoft YaHei,Cabin, Arial, STXihei, 华文细黑, SimSun, 宋体, Heiti, 黑体, STSong;（默认微软雅黑，如果没有微软雅黑再用其它的字体，电脑端也是一样）

 

  1. 父元素如果有旋转属性或者scare放大缩小属性都会使得pisition:flex失灵变成pisition：absolute的效果

大神的解释：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

 

15.用p标签与高度相关时必需要设置line-hight(没有特殊要求时设为font-size的值)，因为p标签会默认行高为字体大小加上下留的空白高度（默认上下留白）

 

16.去除-webkit-的滚动条

#content::-webkit-scrollbar{ display：none; }

设置滚动条样式

/*滚动条宽度*/

#content::-webkit-scrollbar{ width:5px; }

/*滚动条滑块*/

#content::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.25); border-radius:3px; }

/*滚动条的整个背景*/

#content::-webkit-scrollbar-track-piece{ background:#eee; }

 

  1. text-align:justify规定如何对齐行文本进行对齐和分隔，对于长文本行内整齐效果好

注意（多行使用时当文字两端占满整行宽度时才有效.）

 

18.阻止旋转屏幕时自动调整字体大小html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

 

19.禁止用户选中文字

 -webkit-user-select:none

 

20.flex布局兼容性问题(移动端兼容性较为良好)

Android ;2.3 开始就支持旧版本 display:-webkit-box;4.4 开始支持标准版本 display: flex;

IOS： 6.1 开始支持旧版本 display:-webkit-box;，7.1 开始支持标准版本display: flex;

 

  1. 移动端字体小于12px使用四周边框或者背景色块，可能出现安卓文字偏上bug问题，可以使用整体放大1倍再缩放scale，而且字体不要是奇数

 

不足：改用a标签（有链接跳转的地方）， 像最左、最右、居中此类有特点的位置要保证在任何情况下都能保持特点（比如居中用百分比定位，左右用flex布局属性、margin-最左用left、或者浮动），  不要只考虑展示效果（也要为交互便捷考虑比如有两个地方应用input range和select）， 了解webkit对标签或input控件的渲染效果，内部的标签要活用不要只用div减少识别性和快捷性，关于文件放置相同功能模块的网页和css放在一个文件夹下面，index，login等跳转功能较多或模块的主体页面放在最外层，要写各种机型的兼容HTC、三星等（腾讯gituht上有）

服务器托管 混合云 移动端web前端框架 移动端开发 移动端网站 移动端网站开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1313.html

相关文章

  • 移动端布局与适配

    摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。 移动端页面适配—...

    Clect 评论0 收藏0

  • 前端资源系列（4）-前端学习资源分享&前端面试资源汇总

    摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

    princekin 评论0 收藏0

  • HTML-CSS

    摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

    xiaokai 评论0 收藏0

  • HTML-CSS

    摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

    CHENGKANG 评论0 收藏0

  • 个人分享--web前端学习资源分享

    摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

    sherlock221 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<