2021-10-20 12:01:04 +08:00

5.9 KiB

Raw Permalink Blame History

nav

group

title	path
面试	/interview

title	order
💊 面试题库	4

HTML

开发能力模型

基础开发 - 响应式开发 - 滑屏应用开发 - 动画效果开发 - 游戏开发

基础页面开发

一、思考流程

确定设计稿是否开发友好？还原成本？
确定特殊元素是否有合理的边界处理（比如文案超出、输入框文案校验）
确定页面框架结构：Layout
确定整体网页可复用性组件：Site component
确定当前页面可复用组件：Page component

二、编写页面骨骼框架

盒模型

margin、border、padding、content 区分元素宽度和盒子宽度（是否包括margin，在css3样式中可以使用：box-sizing：content-box、border-box）

布局

普通文档布局（display）
浮动布局（float）
绝对布局（position）
弹性布局（display：flex）
网格布局（grad）

语义化

三、填充网页血肉内容

切图可以使用 PS 的「生成 > 图像资源」

四、润色

使用bem方式命名 class（block、element、modify）

兼容性测试

页面在各浏览器，不同分辨率下是否能正常展示
网页的功能是否能在各个浏览器中使用

响应式页面

一、添加 viewport meta 标签

pageSpeed 准则

推荐在移动端头文件中，添加如下代码：

二、使用 Media Queries

六个参数

参数名	描述
min-width	当视窗宽度大于或等于指定值时，@media 规则下的样式将被应用
max-width	当视窗宽度小于或等于指定值时，@media 规则下的样式将被应用
min-height	当视窗高度大于或等于指定值时，@media 规则下的样式将被应用
max-height	当视窗高度小于或等于指定值时，@media 规则下的样式将被应用
orientation=portrait	当视窗高度大于或等于宽度时，@media 规则下的样式将被应用
orientation=landscape	当视窗宽度大于高度时，@media 规则下的样式将被应用

2种用法

方法一，使用link标签：

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">

方法二，直接在style中使用：

@media (max-width: 640px) {
  /*当视窗宽度小于或等于 640px 时，这里的样式将生效*/
}

三、使用viewport单位以及rem

方法一：仅使用vw作为css长度单位

利用sass函数将设计稿尺寸转换为vw

// iPhone 6尺寸作为设计稿基准
$vw_base: 375; 
@function vw($px) {
    @return ($px / $vm_base) * 100vw;
}

无论是文本字号大小还是布局高宽、间距、留白等都使用 vw 作为 CSS 单位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vw(15) vw(10) vw(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vw(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vw(40); // 宽度
                height: vw(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vw(2);
            }
        }
    }
}

物理像素线（1px），采用transform属性scale实现

.mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
}

对于需要保持高宽比的图，使用padding-top实现：

.mod_banner {
    position: relative;
    // 使用padding-top 实现宽高比为 100:750 的图片区域
    padding-top: percentage(100/750);
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

方法二：vw搭配rem，寻找最优解

给更元素的字体大小设置随着视窗变化而变化的vw单位，这样就可以实现动态改变其大小
其它元素的文本字大小、布局高宽、间距、留白使用rem单位
限制根元素大小的最大最小值，配合 body 加上最大宽度和最小宽度，实现布局宽度的最大最小限制

核心代码如下：

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

滑屏应用开发

善用利器

熟练使用现有的滑动组件 swiper 或者其它

5.9 KiB Raw Permalink Blame History Unescape Escape