网页设计的安全宽度 第1篇
假设W=1200,i=10(10的倍数),n=12W=(a+i)*n-i1200+10=(a+10)*12a约等于90所以W=(90+10)*12-10=1190所以这种等分方式是最接近1200屏幕需求例如：淘宝，天猫，京东W=(90+10)*12-10=1190
1180版心：W=1180,i=20(10的倍数),n=12，a=80W=(80+20)*12-20=1180例如：UI中国
网页设计的安全宽度 第2篇
网页中什么是首屏呢？用一句话概括：首屏是指不滚动 web 网页屏幕的情况下就能被用户看到的画面。整个绿色区域为首屏
一屏式首屏设计
世界著名的网页易用性专家尼尔森曾经有报告显示，首屏以上的关注度为 ，首屏以下的关注度仅有 。这两个数据足以表明，首屏对每一个需要转化率的网站设计的重要性。
网页设计的安全宽度 第3篇
由于大前端风格统一要求，多端首屏设计统一按 iPhone 6/6s/7/8 的 750px * 1334px 来设计
市面上各种终端各不相同，而现今比较流行的做法是用 rem 单位做屏幕自适应（无论是淘宝的 flexible 或者网易的10倍均分解决方案）。但都会存在一个安全区域问题，如果用尽 750px * 1334px 中高度为 1334px 的区域放满内容，肯定会有问题；退一步，假如去掉微信或者其他浏览器顶部工具栏高度 130px 剩余 1204px 的高度，如果用尽后，也会出现问题，因为若按 750px 宽度比例进行开发，华为 P9/ P10 的屏幕占比高度为 1100px 左右，有将近 100px 左右的内容需要滚动屏幕才能被看到。
全面屏的出现，就算用尽 750px * 1334px 中高度为 1334px 的高度区域，下方依然会出现空洞的情况。此时如果对网站内容展示要求较高，可考虑使用媒体查询（media query）来对高度进行二次适配处理（一般不需要）。
设计统一按宽度 750px 宽度来设计，首屏内容安全高度：1100px，对于全面屏手机有特别需求可考虑使用媒体查询（media query）来对高度进行二次适配处理（一般不需要）。