前端面试题

最新推荐文章于 2024-05-14 17:33:16 发布

shuyanSister

最新推荐文章于 2024-05-14 17:33:16 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签：面试题前端

本文链接：https://blog.csdn.net/xiaoritai7803/article/details/79858373

版权

请写出一个符合 W3C 规范的 HTML 文件，要求页面标题为「我的页面」页面中引入了一个外部 CSS 文件，文件路径为 /style.css页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效页面中引入了一个外部 JS 文件，路径为 /...

摘要由CSDN通过智能技术生成

请写出一个符合 W3C 规范的 HTML 文件，要求

页面标题为「我的页面」
页面中引入了一个外部 CSS 文件，文件路径为 /style.css
页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效
页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效
页面中引入了一个外部 JS 文件，路径为 /main.js
页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的页面</title>
    <link rel="stylesheet" href=" /style.css">
    <link rel="stylesheet" href="print.css" media="print" />
    <link rel="stylesheet" href="mobile.css" media='(max-width:500px)'>

</head>
<body>
<svg>

    <circle cx="100" cy="100" r="50" fill="red"/>

</svg>
<script src="/main.js"></script>
<script src="/gbk.js" charset="GBK"></script>
</body>
</html>

说明：
媒体类型

all，所有设备
print，打印
screen，彩色的电脑屏幕
speech，不知道什么来的。

按需‘加载’css
@media还可以用在link标签上。

<link rel="stylesheet" href="css/1.css" media='(max-width:500px)'>

当浏览器宽度低于500px时，1.css的样式才会有效果。但这不代表大于500px时，就没加载了1.css。使用了@media属性后，只会让你当条件符合了，才让对应的css文件有效果。而且用这种方式有一个好处，就是不用在css里写@media。

移动端是怎么做适配的？

1, meta viewport
在head中添加这个meta:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2 媒体查询

@media (max-width:1000px){
    div{
   background:blue;}
}
@media (min-width:1000px) and (max-width:1150px){
    div{
   background: yellow;}
}
@media only screen and (max-width:1150px){
    div{
   border:solid 1px;}
}
@media not print and (max-width:1150px){
    div{
   border-radius:50%;}
}

and，就是‘和’的意思，前后两个条件都达到时
only，唯一
not，除了这个之外

上面4个@media，分别的效果是：

当浏览器宽度低于1000px时
当浏览器宽度大于1000px 和小于1150px时
当在屏幕上显示和宽度小于1150px时
除了在打印上显示外和宽度小于1150px时

3 动态 rem 方案
rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位，即根据网页的根元素（html）来设置字体的大小。
手机端方案的特点
a. 所有手机显示的界面都是一样的，只是大小不同
b. 1 rem == html font-size == viewport width
使用 JS 动态调整 REM

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>

REM 可以与其他单位同时存在

font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;

在 SCSS 里使用 PX2REM，实现 px 自动转换 rem

@function px( $px ){
   
  @return $px/$designWidth*10 + rem;
}

$designWidth : 750;  //750为设计稿的宽度

.child{
  width: px(375);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

用过CSS3吗? 实现圆角矩形和阴影怎么做?

圆角矩形使用border-radiaus:百分数 || 具体像素值

说明：border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

阴影使用：box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];

说明：h-shadow 和 v-shadow 为必选，后面的[blur][spread] [color][inset] 可以根据需要选择写

什么是闭包，闭包的用途是什么？

「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
闭包的作用:
私有变量
柯里化

call、apply、bind 的用法分别是什么？

最低0.47元/天解锁文章

shuyanSister

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端面试题

请写出一个符合 W3C 规范的 HTML 文件，要求页面标题为「我的页面」页面中引入了一个外部 CSS 文件，文件路径为 /style.css页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效页面中引入了一个外部 JS 文件，路径为 /...
复制链接

扫一扫