前端总结-小总结

 前端总结-小总结

针对当前公司只有我一个前端6个后台公司要求写的基础规范

前端总结

手机端

手机端文字大小范围22-32px  文字不能小于22px;

内容行高，22px-28px：实际情况根据页面设计定

文字颜色#333333  导航或标题等#666666   注释，内容#999999   注释，内容

 1.由于近几年手机的全面屏（也就是屏占比大）原来越多，写手机端页面不能像早期那固定的宽高手机屏的比例去写，那么为了配对更多的手机型号兼容，就得去使用vw（说明：相对于视口的宽度，视口被均分为100单位的vw）建议：如果使用vw单位的话那么里面所有的单位都尽量使用vw（例如：高、宽、边距、边框以及文字的大小），换算形式：以宽度750设计稿为例子来讲的话 设计稿中一个宽为450的div的话就是450除750乘100=60vw；但要注意由于vw是以视觉窗口的宽度为比例所以内外边距以及边框线的宽度加起来必须不能超过100；（例如：宽度为90vw外边距为5vw=width：90vw;margin：5vw; 加起来宽度为100vw；如果超出100vw很有可能导致内容页面可以左右平移的尴尬场面）

兼容性：

浅绿= 支持

红色= 不支持

粉色= 部分支持

2注意前端页面使用标签问题

  W3C指出h1-h7标签可定义标题。h1定义最大的标题。h6定义最小的标题。h标签是成对出现的，以开始，以结束。h1，h2，h3，h4，h5，h6，h7作为标题标签，并且依据重要性递减。遵循这样的原则是很有必要的，它能让页面的层级关系更清楚，让搜索引擎更好地抓取和分析出页面的主题内容等等；

注意：使用时一定得注意好重要性什么时候使用h1什么时候使用h3心里面一定要想好，如果大量胡乱使用会影响网站的seo，切记不可为了追求h标签所附带的居中，加粗样式去胡乱使用标签。

2. 手机页面不要大量使用浮动float属性，这个属性使用后是会有一些“副作用”（1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。2、边框不能撑开，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。3.margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。）建议使用弹性盒子flex属性，或是定位，但尽量不要使用float属性避免发生页面布局错乱。

3. 写手机端页面一定得注意兼容问题

如果使用插件的话就得想着插件在安卓上使用正常那么在苹果手机上面或是其他上面使用可不可以，

写css样式也要注意要写各个版本的兼容写法

4.前端图片使用的规范

  Banner图片最大不超过400kb（看具体情况而定看照片的具体画质，在不影响图片整体效果前尽量的压缩画质）

小图标看具体情况尽量做在一张矢量图片上面然后使用背景图片去定位

注意：手机端页面做完之后一定要在不同型号手机上测试，对于样式对于整体页面风格一定要自己心里面清楚，无论是前端也好其他岗位也好只要是做网站，个人建议平时可以多参考一些好的网站给自身做积累

电脑端（pc端）

PC端页面设置为1920px宽度，页面整体宽度设置为1100-1200px,现在页面一般设为1200px

电脑端文字大小设置（一般为偶数位）

用于注释，内容介绍，底部信息等12px；

例如：

标题，导航：14px/16px；

例如：

内容行高，22px-28px：实际情况根据页面设计定

文字颜色#333333  导航或标题等#666666   注释，内容#999999